/* =====================================================================
   Sumit Banik — personal academic website

   Stanford's colours: a white page, Stanford black type, Cardinal red
   bands and digital red links, with Fog greys for rules and ornaments.
   Cormorant Garamond for the name and headings, Source Serif 4 for
   reading, Inter in small tracked capitals for labels. Topic colours:
   Cardinal (Feynman integrals), Palo Alto green (phenomenology), Sky (software).
   ===================================================================== */

:root {
  --paper:  #ffffff;
  --panel:  #f4f4f4;
  --ink:    #2e2d29;
  --grey:   #53565a;
  --hair:   rgba(46,45,41,.13);

  --navy:   #8c1515;               /* Cardinal red: the name, bands */
  --head:   #2e2d29;               /* Stanford black: headings */
  --accent: #8c1515;               /* Cardinal red: links */
  --gold:   #b6b1a9;
  --rule:   rgba(177,4,14,.32);

  --c-fi:    #8c1515;  --c-fi-bg:    #f6ecec;   /* Feynman integrals: Cardinal */
  --c-pheno: #417865;  --c-pheno-bg: #e9f1f0;   /* phenomenology: Bay         */
  --c-soft:  #016895;  --c-soft-bg:  #e8f1f5;   /* software: Sky              */

  --rail: 6.25rem;
  --gap:  1.25rem;
  --measure: 58rem;
  --prose: 42rem;

  --display: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* Line breaks: headings and short titles in lines of similar length, running text without a lone word on its last
   line (on phones "Postdoctoral fellowships and / grants" and "Proseminar Theoretische / Physik" were left so).
   The longhand only, so that nothing set to nowrap starts to wrap. It is inherited, so the body sets it for all text. */
body { text-wrap-style: pretty; }
h1, h2, h3, h4, .page-sub, .ex-title, .pick-title, .kicker, .fund-ptitle, .vis-label { text-wrap-style: balance; }

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

a { color: var(--accent); text-decoration-color: var(--rule);
    text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, .skip:focus {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--paper);
        padding: .6rem 1rem; z-index: 50; font-family: var(--sans); }
.skip:focus { left: 1rem; top: 1rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------- masthead */

.masthead {
  padding: 3.25rem 0 2.25rem;
  background:
    radial-gradient(55rem 22rem at 90% -30%, rgba(182,177,169,.20), transparent 70%),
    linear-gradient(180deg, #f8f6f1 0%, var(--paper) 100%);
}

h1 { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }

.name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.8rem, 1.8rem + 3.4vw, 4.2rem);
  letter-spacing: .005em;
  line-height: 1;
  color: var(--head);
  text-decoration: none;
}
.name:hover { color: var(--accent); }

.who { margin-top: .7rem; font-size: 1.1rem; color: var(--ink); }
.who .role, .who .org { display: block; }
.who .role { font-weight: 600; }
.who .org a { color: var(--ink); text-decoration-color: var(--rule); }
.who .org a:hover { color: var(--accent); }
.who::before { content: ""; display: block; width: 3.5rem; height: 1px;
               background: var(--gold); margin-bottom: .75rem; }
.sep { color: var(--grey); padding: 0 .2em; }


/* Portrait: a framed print beside the bio, with a double Fog hairline. */
.portrait-frame { margin: .4rem 0 0; }
.portrait {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 2px; background: var(--panel);
  box-shadow: 0 0 0 1px rgba(182,177,169,.7), 0 0 0 6px var(--paper),
              0 0 0 7px rgba(182,177,169,.35), 0 18px 32px -20px rgba(46,45,41,.6);
}

/* Navy navigation band, pinned on scroll. */
.navbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 2px 12px -6px rgba(29,28,24,.5);
}
.navbar nav {
  display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .1rem;
  padding: .45rem 0;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.navbar nav::-webkit-scrollbar { display: none; }
.navbar nav a {
  text-decoration: none; color: rgba(255,255,255,.78);
  padding: .45rem .5rem; border-radius: 0; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: background .15s, color .15s;
}
.navbar nav a:hover { color: #ffffff; }
.navbar nav a.here { color: #dad7cb; border-bottom-color: var(--gold); }
.navbar nav a:first-child { margin-left: -.5rem; }
.navbar nav a:last-child { margin-right: -.5rem; }

/* Mid-size screens: tighten the spacing so all items still fit on one line. */
@media (max-width: 62rem) {
  .navbar nav { letter-spacing: .07em; }
  .navbar nav a { padding-left: .36rem; padding-right: .36rem; }
  .navbar nav a:first-child { margin-left: -.36rem; }
  .navbar nav a:last-child { margin-right: -.36rem; }
}
/* Narrow screens: keep one line and let the bar scroll sideways. */
@media (max-width: 51rem) {
  .navbar nav { overflow-x: auto; scrollbar-width: none; }
  .navbar nav a:first-child { margin-left: 0; }
  .navbar nav { justify-content: flex-start; gap: .4rem; }
  .navbar nav a:last-child { margin-right: 0; padding-right: 1.5rem; }
}

/* ------------------------------------------------------ chapters */

main.wrap { padding-bottom: 3rem; }

.chapter { padding-top: 1rem; }
.chapter-title {
  display: flex; align-items: center; gap: .9rem;
  margin: 3.2rem 0 .5rem;
  font-family: var(--display); font-weight: 600;
  font-size: 2.2rem; letter-spacing: .01em; line-height: 1.1;
  color: var(--head);
}
.chapter-title::after {
  content: ""; flex: 1; height: 1px; margin-top: .35rem;
  background: linear-gradient(90deg, var(--sec, var(--gold)), transparent);
  opacity: .75;
}

.sect {
  margin: 2rem 0 .3rem;
  font-family: var(--sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

.prose { max-width: var(--prose); }
.prose p { margin: 1rem 0; hyphens: manual; }
.lede { font-family: var(--display); font-size: 1.55rem; font-weight: 500; font-style: italic;
        line-height: 1.35; color: var(--head); }

/* ----------------------------------------------------- stats strip */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  margin: 1.8rem 0 .5rem;
}
.stat {
  padding: .95rem .6rem; text-align: center; border-radius: 4px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255,255,255, .5); border: 1px solid var(--hair);
  border-top: 2px solid var(--c, var(--accent));
}
.stat:nth-child(1) { --c: var(--c-fi); }
.stat:nth-child(2) { --c: var(--c-soft); }
.stat:nth-child(3) { --c: var(--gold); }
.stat:nth-child(4) { --c: var(--c-pheno); }
.stat .n { display: block; font-family: var(--display); font-weight: 600;
           font-size: 2.3rem; line-height: 1.05; color: var(--c); font-variant-numeric: lining-nums; }
.stat .l { font-family: var(--sans); font-size: .64rem; color: var(--grey); line-height: 1.5;
           text-transform: uppercase; letter-spacing: .1em; text-wrap: balance; }
@media (max-width: 44rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats-note { font-size: .85rem; color: var(--grey); margin: 0; font-family: var(--sans); }

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

.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem; }
@media (max-width: 46rem) { .themes { grid-template-columns: 1fr; } }
.theme {
  --c: var(--c-fi); --bg: var(--c-fi-bg);
  background: var(--bg); border-radius: 4px; padding: 1.1rem 1.2rem 1.2rem;
  border-top: 2px solid var(--c);
  display: flex; flex-direction: column;
}
.theme.pheno { --c: var(--c-pheno); --bg: var(--c-pheno-bg); }
.theme.soft  { --c: var(--c-soft);  --bg: var(--c-soft-bg); }
.theme h4 { margin: 0 0 .45rem; font-family: var(--display); font-weight: 700;
            font-size: 1.35rem; line-height: 1.15; color: var(--c); }
.theme p { margin: 0; font-size: .97rem; hyphens: manual; }
.theme .keys { margin-top: auto; padding-top: .8rem; font-family: var(--sans); font-size: .68rem; color: var(--grey);
               text-transform: uppercase; letter-spacing: .1em; }

/* ------------------------------------------------------ rail entries */

.entry {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 var(--gap);
  padding: .75rem 0;
  border-bottom: 1px solid var(--hair);
}
.entry:last-child { border-bottom: 0; }
.rail { color: var(--grey); font-family: var(--sans); font-size: .84rem; line-height: 1.45;
        padding-top: .18rem; text-align: right; font-variant-numeric: tabular-nums; }
.body { min-width: 0; }
.title { font-weight: 600; }
.pub .title { font-weight: 600; font-size: 1.02rem; color: var(--head); }
.where { float: right; color: var(--grey); font-family: var(--sans); font-size: .84rem;
         margin-left: 1rem; padding-top: .15rem; }
.meta { color: var(--grey); font-size: .95rem; }
.detail { font-size: .95rem; margin-top: .1rem; }
.muted { color: var(--grey); }
.me { color: var(--ink); font-weight: 700; }
.amount { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; color: var(--ink); }

.tag {
  display: inline-block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  line-height: 1.7; padding: 0 .55rem; margin-left: .45rem; border-radius: 2px;
  text-transform: uppercase; letter-spacing: .1em; vertical-align: .15em;
  background: var(--c-pheno-bg); color: var(--c-pheno);
}
.tag.grey { background: rgba(46,45,41,.07); color: var(--grey); box-shadow: inset 0 0 0 1px rgba(46,45,41,.16); }
.tag.fi    { background: var(--c-fi-bg);    color: var(--c-fi); }
.tag.pheno { background: var(--c-pheno-bg); color: var(--c-pheno); }
.tag.soft  { background: var(--c-soft-bg);  color: var(--c-soft); }

.links { margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .85rem; }
.links a { font-family: var(--sans); font-size: .66rem; font-weight: 500;
           letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
           border-bottom: 1px solid var(--rule); padding-bottom: .05rem; }
.links a:hover { border-bottom-color: var(--accent); }
.links .tag { margin-left: 0; }
.links .tags { display: inline-flex; gap: .3rem; margin-left: auto; }

@media (max-width: 38rem) {
  :root { --rail: 3.2rem; --gap: .8rem; }
  .where { float: none; display: block; margin: 0; padding: 0; }
  .links .tags { margin-left: 0; }
}

/* ---------------------------------------------------- publication filter */

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 .2rem; }
.filters button {
  --c: var(--navy);
  font-family: var(--sans); font-size: .7rem; font-weight: 500; cursor: pointer;
  letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 2px; padding: .4rem .9rem;
  transition: background .15s, color .15s;
}
.filters button[data-filter="fi"]    { --c: var(--c-fi); }
.filters button[data-filter="pheno"] { --c: var(--c-pheno); }
.filters button[data-filter="soft"]  { --c: var(--c-soft); }
.filters button:hover { background: color-mix(in srgb, var(--c) 9%, transparent); }
.filters button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #ffffff; }
.pub[hidden], .sect[hidden] { display: none; }

/* ---------------------------------------------------- simple lists */

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.chips li { font-family: var(--sans); font-size: .85rem; padding: .2rem .7rem; border-radius: 999px;
            background: var(--c-fi-bg); color: var(--head); border-radius: 2px; }
.chips li:nth-child(3n+2) { background: var(--c-pheno-bg); }
.chips li:nth-child(3n)   { background: var(--c-soft-bg); }

.plain { list-style: none; padding: 0; margin: .6rem 0 0; }
.plain li { padding: .5rem 0 .5rem 1.4rem; border-bottom: 1px solid var(--hair); position: relative; }
.plain li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem;
                    width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-pheno); }
.plain li:last-child { border-bottom: 0; }

/* ---------------------------------------------------- software cards */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.1rem; }
@media (max-width: 46rem) { .cards { grid-template-columns: 1fr; } }
.card {
  background: rgba(255,255,255, .5); border: 1px solid var(--hair); border-radius: 4px;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column;
  border-top: 2px solid var(--gold);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: 0 12px 26px -16px rgba(46,45,41,.5); transform: translateY(-2px); }
.card h4 { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.45rem; font-weight: 700; color: var(--head); }
.card p { margin: 0 0 .7rem; font-size: .95rem; flex: 1; }
.card .links { margin-top: auto; }

/* ---------------------------------------------------- CV download */

.button {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--navy); color: #ffffff; border: 1px solid var(--gold);
  padding: .7rem 1.4rem; border-radius: 2px;
  transition: background .15s;
}
.button:hover { background: var(--accent); }

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

footer { background: var(--navy); color: rgba(255,255,255,.75); margin-top: 2rem; border-top: 1px solid var(--gold); }
footer .wrap { padding-top: 1.4rem; padding-bottom: 1.6rem; font-family: var(--sans); font-size: .85rem; }
footer a { color: #dad7cb; }
footer p { margin: .2rem 0; }

/* overline for antiparticles, e.g. t t-bar */
.ov { text-decoration: overline; text-decoration-thickness: .06em; }

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

@media print {
  .navbar, .filters, .skip, .portrait-frame { display: none !important; }
  .masthead { background: none; }
  body { background: #ffffff; color: #000000; font-size: 10.5pt; }
  a { color: #000000; text-decoration: none; }
  footer { background: none; color: #000000; }
  .entry { break-inside: avoid; }
}

/* =====================================================================
   Additions: tagline, news, selected work, talk toggle, contact, motion
   ===================================================================== */

.tagline {
  margin: 1rem 0 0; max-width: none; text-wrap: balance;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 1.35rem; line-height: 1.35; color: var(--accent);
}

/* News: a quiet timeline with a Fog grey spine. */
.news { list-style: none; margin: .4rem 0 0; padding: 0; max-width: var(--prose);
        border-left: 1px solid var(--gold); }
.news li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: .8rem;
           padding: .45rem 0 .45rem 1.1rem; }
.news li::before { content: ""; position: absolute; left: -.28rem; top: 1rem;
                   width: .5rem; height: .5rem; border-radius: 50%;
                   background: var(--paper); border: 1.5px solid var(--gold); }
.news li:first-child::before { background: var(--gold); }
.news .when { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em;
              color: var(--grey); padding-top: .25rem; }

/* Selected work: three linked cards. */
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .8rem; }
@media (max-width: 46rem) { .picks { grid-template-columns: 1fr; } }
.pick {
  --c: var(--c-fi);
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.1rem 1.2rem; border-radius: 4px; text-decoration: none; color: var(--ink);
  background: rgba(255,255,255, .55); border: 1px solid var(--hair);
  border-left: 2px solid var(--c);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pick.pheno { --c: var(--c-pheno); }
.pick.soft  { --c: var(--c-soft); }
.pick:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(46,45,41,.6);
              border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.kicker { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .14em;
          text-transform: uppercase; color: var(--c); }
.pick-title { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15;
              color: var(--head); }
.pick-text { font-size: .93rem; color: var(--grey); flex: 1; }
.pick-ref { font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; color: var(--accent); }
.pick:hover .pick-ref span { margin-left: .2rem; }
.pick-ref span { transition: margin .2s; }

/* "Show all talks" toggle. */
details.more > summary {
  list-style: none; cursor: pointer; display: inline-block; margin: 1rem 0 .4rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--rule); border-radius: 2px; padding: .5rem 1rem;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: " ↓"; }
details.more[open] > summary::after { content: " ↑"; }
details.more[open] > summary { margin-bottom: .2rem; }
details.more > summary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Contact block. */
.contact-card {
  margin-top: 1rem; padding: 1.6rem 1.8rem; border-radius: 4px;
  background:
    radial-gradient(30rem 12rem at 100% 0%, rgba(182,177,169,.18), transparent 70%),
    var(--panel);
  border: 1px solid var(--hair);
}
.contact-card p { margin: 0 0 1rem; }
.contact-card p:last-child { margin: 0; }
.contact-alt { margin-left: 1rem; color: var(--grey); font-size: .95rem; }
@media (max-width: 34rem) { .contact-alt { display: block; margin: .8rem 0 0; } }



@media print { details.more > summary { display: none; } details.more > * { display: block; } }

/* Contact row: email on its own line, then profile links. Each icon sits in
   a thin gold ring that fills with espresso on hover. */
.contact { margin-top: 1.2rem; }
.contact a { display: inline-flex; align-items: center; gap: .6rem;
             text-decoration: none; color: var(--head); transition: color .15s; }
.contact a:hover { color: var(--accent); }

.contact .ico {
  width: 1.95rem; height: 1.95rem; padding: .42rem; flex: none;
  border-radius: 50%; border: 1px solid rgba(182,177,169,.55);
  background: rgba(255,255,255, .6); color: var(--accent);
  transition: background .2s, color .2s, border-color .2s;
}
.contact a:hover .ico { background: var(--navy); border-color: var(--navy); color: #dad7cb; }

.contact .email { font-size: 1.08rem; letter-spacing: .005em; }
.hero-mail { display: flex; align-items: center; gap: .6rem; }   /* the email at the top of the home page, with its copy button */

.profiles { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.35rem;
            margin-top: .8rem; font-family: var(--serif); font-size: 1.02rem; }
.profiles a { padding: 0; }

/* Epigraph at the head of the Research section. */
.epigraph { margin: 1.4rem 0 1.8rem auto; max-width: 30rem; text-align: right; }
.epigraph blockquote { margin: 0; }
.epigraph p {
  margin: 0; font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 1.6rem; line-height: 1.3; color: var(--head);
}
.epigraph p::before { content: "“"; color: var(--gold); margin-right: .05em; }
.epigraph p::after  { content: "”"; color: var(--gold); margin-left: .02em; }
.epigraph figcaption {
  margin-top: .55rem; font-family: var(--sans); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.epigraph::before { content: ""; display: block; width: 3.5rem; height: 1px;
                    background: var(--gold); margin: 0 0 .9rem auto; }
@media (max-width: 34rem) { .epigraph { text-align: left; margin-left: 0; }
                            .epigraph::before { margin-left: 0; } }

/* About: bio beside the portrait. */
.about-grid { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2.6rem; align-items: start;
              margin-top: 1.4rem; }
.about-grid .prose p:first-child { margin-top: 0; }
@media (max-width: 44rem) {
  .about-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .portrait-frame { max-width: 12rem; }
}


/* Affiliation links in the header: underline only on hover. */
.who .org a { text-decoration: none; }
.who .org a:hover { text-decoration: underline; text-decoration-color: var(--rule); }

/* Tagline: a single line on laptops and desktops; wraps naturally on phones. */
@media (min-width: 48rem) { .tagline { white-space: nowrap; } }

/* =====================================================================
   Section colours. Each chapter carries its own accent from Stanford's palette:
   the § number, the heading rule, sub-headings and hover states take it,
   and every other chapter sits on a full-width band tinted with it.
   ===================================================================== */
#about        { --sec: #8c1515; }   /* Cardinal    */
#research     { --sec: #417865; --tint: #f9f8f3; }   /* Bay                 */
#publications { --sec: #651c32; }   /* Brick       */
#software     { --sec: #175e54; --tint: #f7f6f1; }   /* Palo Alto green     */
#talks        { --sec: #006b81; }   /* Lagunita    */
#funding      { --sec: #d1660f; --tint: #f8f7f1; }   /* Poppy               */
#teaching     { --sec: #620059; }   /* Plum        */
#refereeing   { --sec: #7a863b; --tint: #f7f6f0; }   /* Olive               */
#cv           { --sec: #8c1515; }   /* Cardinal    */
#contact      { --sec: #8c1515; --tint: #f7f6f1; }   /* Cardinal            */

body { overflow-x: clip; }
main { counter-reset: chap; }
.chapter { counter-increment: chap; position: relative; }

.chapter-title { color: color-mix(in srgb, var(--sec) 30%, var(--head)); }
.chapter-title::before {
  content: "§" counter(chap);
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 1.5rem; letter-spacing: .02em; color: var(--sec);
  align-self: flex-end; padding-bottom: .2rem; margin-right: -.25rem;
}
.chapter .sect { color: var(--sec); }
.chapter .entry .rail { transition: color .2s; }
.chapter .entry:hover .rail { color: var(--sec); }

/* Alternate chapters: a full-bleed band in a whisper of the section colour. */
main > .chapter:nth-of-type(even) { padding-bottom: 2.8rem; }
main > .chapter:nth-of-type(odd)  { padding-bottom: 3rem; }
main > .chapter:nth-of-type(even)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--tint, color-mix(in srgb, var(--sec) 8%, var(--paper)));
  border-top: 1px solid color-mix(in srgb, var(--sec) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sec) 20%, transparent);
}
main > .chapter:nth-of-type(even) + .chapter .chapter-title { margin-top: 2.6rem; }
main.wrap { padding-bottom: 0; }
main > .chapter:last-child { margin-bottom: 0; }
footer { margin-top: 0; }

@media print {
  main > .chapter:nth-of-type(even)::before { display: none; }
}

/* Directorate link in the role line: reads as part of the title, underline on hover. */
.who .role a { color: inherit; text-decoration: none; }
.who .role a:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--rule); }

/* Research interests (CV): two strands, each a small card with its own accent. */
.interests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: .8rem; }
@media (max-width: 40rem) { .interests { grid-template-columns: 1fr; } }
.interest {
  --c: var(--c-fi);
  padding: 1rem 1.2rem 1.05rem; border-radius: 4px;
  background: rgba(255,255,255, .55); border: 1px solid var(--hair);
  border-top: 2px solid var(--c);
}
.interest.pheno { --c: var(--c-pheno); }
.interest .kicker { color: var(--c); margin-bottom: .55rem; }
.interest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.interest li { position: relative; padding-left: 1rem; font-size: .98rem; line-height: 1.45; }
.interest li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .38rem; height: .38rem; transform: rotate(45deg);
  background: var(--c); opacity: .75;
}

.contact-lede { font-family: var(--display); font-style: italic; font-weight: 500;
                font-size: 1.45rem; line-height: 1.35; color: var(--head); }

/* Letterhead, on paper: a Cardinal red edge with a Fog hairline across the top of the page
   (on screen the menu bar at the top is the edge). */
@media print {
  body { border-top: 4px solid var(--navy); }
  .masthead { box-shadow: inset 0 1px 0 var(--gold); }
}

/* Footer as a signature block. */
footer .wrap.foot {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.2rem 2rem;
  padding-top: 2.2rem; padding-bottom: 2.2rem;
}
.foot-name { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.1;
             color: #ffffff; letter-spacing: .01em; }
.foot-id { flex: 1 1 18rem; min-width: 0; }
.foot-aff { margin-top: .4rem; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.foot-mail { display: inline-block; margin-top: .35rem; font-family: var(--serif); font-size: .95rem;
             color: #dad7cb; text-decoration: none; border-bottom: 1px solid rgba(218,215,203,.35); }
.foot-mail:hover { border-bottom-color: #dad7cb; }
.foot-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
             font-size: .75rem; color: rgba(255,255,255,.6); }
.foot-meta a { text-decoration: none; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
@media (max-width: 40rem) { .foot-meta { align-items: flex-start; } }

/* Computing (CV): six cards grouped by purpose, each with its own accent. */
.toolkit { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: .8rem; }
@media (max-width: 52rem) { .toolkit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .toolkit { grid-template-columns: 1fr; } }
.tool {
  --c: #8c1515;
  padding: .9rem 1.1rem 1rem; border-radius: 4px;
  background: rgba(255,255,255, .55); border: 1px solid var(--hair);
  border-top: 2px solid var(--c);
}
.tool:nth-child(2) { --c: #417865; }
.tool:nth-child(3) { --c: #175e54; }
.tool:nth-child(4) { --c: #006b81; }
.tool:nth-child(5) { --c: #620059; }
.tool:nth-child(6) { --c: #d1660f; }
.tool .kicker { color: var(--c); margin-bottom: .5rem; }
/* each separator sits in the gap before its item, so the one that starts a line is clipped away */
.tool ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.15rem; overflow: hidden; }
.tool li { font-size: .98rem; position: relative; }
.tool li::before { content: "·"; position: absolute; left: -1.15rem; width: 1.15rem; text-align: center; color: var(--c); font-weight: 700; }

/* Spoken languages: four quiet cells. */
.tongues { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .8rem;
           border: 1px solid var(--hair); border-radius: 4px; background: rgba(255,255,255, .45); }
@media (max-width: 40rem) { .tongues { grid-template-columns: repeat(2, 1fr); } }
.tongue { padding: .8rem 1rem; text-align: center; }
.tongue + .tongue { border-left: 1px solid var(--hair); }
@media (max-width: 40rem) {
  .tongue:nth-child(3) { border-left: 0; }
  .tongue:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
.t-name { display: block; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.2;
          color: var(--head); }
.t-level { display: block; margin-top: .15rem; font-family: var(--sans); font-size: .64rem; font-weight: 500;
           letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Positions & education (CV): website blocks with a white logo panel on top. */
.positions { display: grid; gap: 1rem; margin-top: .8rem; }
.positions.work  { grid-template-columns: repeat(2, 1fr); }
.positions.study { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 46rem) { .positions.study { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .positions.work, .positions.study { grid-template-columns: 1fr; } }

.blk {
  --c: #8c1515;
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(182,177,169,.18);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.study .blk { --c: #417865; }
.blk:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(46,45,41,.6); }

.blk-logos {
  display: flex; justify-content: center; align-items: center; gap: 1.6rem;
  height: 7rem; padding: 1rem 1.4rem; background: #ffffff;
  border-bottom: 1px solid var(--hair); position: relative;
}
.blk-logos::after {                       /* accent rule under the logo panel */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c);
}
.blk-logos img { height: 100%; width: auto; max-width: 42%; object-fit: contain; display: block; }
.positions.study .blk-logos img { max-width: 60%; }

.blk-body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem 1.25rem 1.1rem; }
.blk-when { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .13em;
            text-transform: uppercase; color: var(--c); }
.blk-title { margin: .35rem 0 .2rem; font-family: var(--display); font-weight: 700; font-size: 1.45rem;
             line-height: 1.12; color: var(--head); }
.blk-org { font-size: .98rem; line-height: 1.45; }
.blk-org a { color: var(--ink); text-decoration-color: var(--rule); }
.blk-org a:hover { color: var(--accent); }
.blk-note { margin: .55rem 0 0; font-size: .9rem; line-height: 1.45; }
.blk-note a { color: var(--ink); text-decoration-color: var(--rule); }
.blk-meta { margin: .5rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--grey); }
.blk-where { margin-top: auto; padding-top: .8rem; font-family: var(--sans); font-size: .64rem;
             letter-spacing: .13em; text-transform: uppercase; color: var(--grey);
             display: flex; align-items: center; gap: .45rem; }
.blk-where::before { content: ""; width: 1.2rem; height: 1px; background: var(--gold); }
.blk-facts { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; margin: .7rem 0 0; }
.blk-facts div { min-width: 0; }
.blk-facts dt { font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .14em;
                text-transform: uppercase; color: var(--grey); }
.blk-facts dd { margin: .1rem 0 0; font-size: .9rem; line-height: 1.35; color: var(--ink); }

/* =====================================================================
   Hover: every row and card lifts gently with a soft shadow, the same
   treatment as the software cards. Mouse devices only, so nothing
   sticks on touch screens.
   ===================================================================== */
:root {
  --lift: 0 0 0 1px rgba(46,45,41,.07), 0 18px 34px -18px rgba(46,45,41,.5),
          0 4px 10px -4px rgba(46,45,41,.16);
  --lift-bg: #ffffff;
}

/* List rows (publications, talks, funding, teaching, supervision) sit on a
   panel that appears on hover. The negative margin keeps text aligned. */
.entry {
  margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem;
  border-radius: 6px;
  transition: background-color .22s, box-shadow .22s, transform .22s, border-color .22s;
}
.plain li {
  margin-left: -1rem; margin-right: -1rem; padding-left: 2.4rem; padding-right: 1rem;
  border-radius: 6px;
  transition: background-color .22s, box-shadow .22s, transform .22s, border-color .22s;
}
.plain li::before { left: 1.2rem; }
.news li {
  padding-right: .8rem; border-radius: 0 6px 6px 0;
  transition: background-color .22s, box-shadow .22s;
}
.theme, .stat, .interest, .tool, .contact-card, .card, .pick, .blk {
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.tongue { transition: background-color .22s; }

@media (hover: hover) {
  .entry:hover, .plain li:hover {
    background: var(--lift-bg); box-shadow: var(--lift); transform: translateY(-2px);
    border-bottom-color: transparent; position: relative; z-index: 1;
  }
  .news li:hover { background: var(--lift-bg); box-shadow: var(--lift); }
  .theme:hover, .stat:hover, .interest:hover, .tool:hover,
  .card:hover, .pick:hover, .blk:hover {
    transform: translateY(-3px); box-shadow: var(--lift);
  }
  .contact-card:hover { box-shadow: var(--lift); }
  .tongue:hover { background: var(--lift-bg); }
}
@media (prefers-reduced-motion: reduce) {
  .entry:hover, .plain li:hover, .theme:hover, .stat:hover, .interest:hover, .tool:hover,
  .card:hover, .pick:hover, .blk:hover { transform: none; }
}

/* =====================================================================
   REDESIGN: landing hero, card sections, motion
   ===================================================================== */

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  min-height: min(90vh, 56rem); display: grid; align-items: center;
  padding: 5.5rem 0 7rem;
}
.hero .field {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(0,0,0,.15) 0%, #000000 78%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(0,0,0,.15) 0%, #000000 78%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-kicker {
  margin: 0 0 1.2rem; font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--accent);
}
.hero .name { font-size: clamp(3.4rem, 1.6rem + 6.4vw, 6.6rem); letter-spacing: .01em; line-height: .98; }
.hero .who { margin-top: 1.2rem; font-size: 1.15rem; }
.hero .who::before { margin: 0 auto 1.1rem; width: 4.5rem; }
.hero .tagline { margin: 1.3rem auto 0; font-size: clamp(1.15rem, .7rem + 1.25vw, 1.55rem); max-width: none; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.hero .contact { display: flex; flex-direction: column; align-items: center; margin-top: 2.2rem; }
.hero .profiles { justify-content: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.55rem; border-radius: 2px; text-decoration: none;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--head); border: 1px solid rgba(46,45,41,.35);
  background: linear-gradient(var(--navy), var(--navy)) no-repeat 0 100% / 100% 0;
  transition: background-size .38s cubic-bezier(.2, .7, .2, 1), color .3s, border-color .3s, transform .2s;
}
.btn:hover { background-size: 100% 100%; color: #ffffff; border-color: var(--navy); }
.btn.solid { background-color: var(--navy); color: #ffffff; border-color: var(--navy);
             background-image: linear-gradient(var(--accent), var(--accent)); }
.btn.solid:hover { border-color: var(--accent); color: #ffffff; }
.btn:active { transform: translateY(1px); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 2rem; z-index: 1; margin-left: -.75rem;
  width: 1.5rem; height: 2.4rem; border: 1.5px solid rgba(46,45,41,.4); border-radius: 1rem;
}
.scroll-cue span {
  position: absolute; left: 50%; top: .45rem; width: 3px; height: .5rem; margin-left: -1.5px;
  border-radius: 2px; background: var(--accent);
}
@media (max-width: 40rem) {
  .hero { min-height: auto; padding: 4rem 0 5.5rem; }
  .hero .who { font-size: 1.02rem; }
}

/* ---------- buttons elsewhere fill on hover ---------- */
.button {
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% 0;
  transition: background-size .38s cubic-bezier(.2, .7, .2, 1), color .3s;
}
.button:hover { background-color: var(--navy); background-size: 100% 100%; }

/* ---------- links: underline grows on hover ---------- */
.prose a, .blk-org a, .blk-note a, .tc-event a {
  text-decoration: none; padding-bottom: .04em;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rule), var(--rule));
  background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .45s cubic-bezier(.2, .7, .2, 1), color .2s;
}
.prose a:hover, .blk-org a:hover, .blk-note a:hover { background-size: 100% 1px, 100% 1px; }

/* ---------- publications: search and show more ---------- */
.filters { align-items: center; }
.pub-search { display: none; }
.js .pub-search {
  display: block; margin-left: auto; min-width: 16rem; padding: .5rem .85rem .5rem 2.1rem;
  font: inherit; font-size: .92rem; color: var(--ink); background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a2b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat .7rem 50% / 1rem;
  border: 1px solid var(--hair); border-radius: 2px; transition: border-color .2s, box-shadow .2s;
}
.js .pub-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(177,4,14,.15); }
@media (max-width: 46rem) { .js .pub-search { margin-left: 0; width: 100%; min-width: 0; } }
.pub-empty { margin: 1rem 0; color: var(--grey); font-style: italic; }
.pub-more { display: none; }
.js .pub-more {
  display: flex; margin: 1.4rem auto 0; cursor: pointer;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); background: transparent; border: 1px solid var(--rule); border-radius: 2px;
  padding: .75rem 1.5rem; transition: background .2s, color .2s;
}
.js .pub-more:hover { background: var(--accent); color: #ffffff; }
.js .pub-more[hidden] { display: none; }

/* ---------- talks as cards ---------- */
.talk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 52rem) { .talk-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .talk-cards { grid-template-columns: 1fr; } }
.talk-card, .fund, .course, .student, .journal {
  background: #ffffff; border: 1px solid var(--hair); border-radius: 6px;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.talk-card { display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.15rem; border-top: 2px solid var(--sec); }
.tc-top, .fund-top {
  display: flex; justify-content: space-between; gap: .8rem;
  font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sec);
}
.tc-top span + span, .fund-top span + span { color: var(--grey); font-weight: 500; }
.tc-title { margin: .6rem 0 .7rem; font-family: var(--display); font-weight: 600; font-size: 1.28rem;
            line-height: 1.2; color: var(--head); }
.tc-event { margin-top: auto; font-size: .92rem; line-height: 1.45; }
.tc-note { margin-top: .2rem; font-size: .84rem; color: var(--grey); }
#talks details.more { margin-top: .6rem; }

/* ---------- funding as feature cards ---------- */
.funds { display: grid; gap: 1rem; margin-top: .8rem; }
.funds.two { grid-template-columns: repeat(2, 1fr); }
.funds.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 46rem) { .funds.two, .funds.three { grid-template-columns: 1fr; } }
.fund { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.2rem 1.35rem 1.25rem; }
.fund::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sec); }
.fund-name { margin: .55rem 0 .15rem; font-family: var(--display); font-weight: 700; font-size: 1.4rem;
             line-height: 1.15; color: var(--head); }
.fund-agency { font-size: .92rem; color: var(--grey); }
.fund-amount { margin-top: auto; padding-top: 1rem; font-family: var(--display); font-weight: 600;
               font-size: 2.1rem; line-height: 1; color: var(--sec); font-variant-numeric: lining-nums; }
.funds.three .fund-amount { font-size: 1.65rem; }
.fund-meta { margin-top: .35rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .05em; color: var(--grey); }
.fund-tags { margin-top: .85rem; }
.fund-tags .tag { margin-left: 0; margin-right: .3rem; }

/* ---------- teaching and supervision cards ---------- */
.courses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: .8rem; }
.students { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .8rem; }
@media (max-width: 46rem) { .courses, .students { grid-template-columns: 1fr; } }
.course, .student { padding: 1.1rem 1.25rem 1.2rem; border-top: 2px solid var(--sec); }
.course .kicker, .student .kicker { color: var(--sec); }
.course-title, .student-name { margin: .45rem 0 .15rem; font-family: var(--display); font-weight: 700;
                               font-size: 1.35rem; line-height: 1.15; color: var(--head); }
.course-role { font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.course p { margin: .65rem 0 0; font-size: .93rem; line-height: 1.5; }
.student-inst { font-size: .92rem; color: var(--grey); }
.student-thesis { margin: .75rem 0 0; font-size: .9rem; line-height: 1.45; }
.student-thesis span { display: block; margin-bottom: .15rem; font-family: var(--sans); font-size: .58rem; font-weight: 600;
                       letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }

/* ---------- refereeing as linked journal cards ---------- */
.journals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: .9rem; }
@media (max-width: 52rem) { .journals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .journals { grid-template-columns: 1fr; } }
.journal { position: relative; display: flex; flex-direction: column; gap: .35rem;
           padding: 1rem 2.4rem 1.05rem 1.15rem; text-decoration: none; color: var(--ink); }
.j-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--head); }
.j-pub { margin-top: auto; font-family: var(--sans); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sec); }
.j-go { position: absolute; right: 1rem; top: .95rem; color: var(--gold); transition: transform .25s; }

/* ---------- contact: a dark closing band ---------- */
#contact { --sec: #d9d6ca; --tint: #8c1515; color: #ffffff; }
main > #contact.chapter::before { border-color: transparent; }
#contact .chapter-title { color: #ffffff; }
#contact .chapter-title::after { background: linear-gradient(90deg, #b6b1a9, transparent); }
#contact .contact-card { background: rgba(255,255,255, .03); border: 1px solid rgba(182,177,169,.45); }
#contact .contact-lede { color: #ffffff; }
#contact .contact-alt { color: rgba(255,255,255,.7); }
#contact .contact-alt a { color: #dad7cb; text-decoration-color: rgba(218,215,203,.4); }
#contact .button { background-color: #ffffff; color: #8c1515; border-color: #ffffff;
                   background-image: linear-gradient(#f4f4f4, #f4f4f4); }
#contact .button:hover { background-color: #ffffff; color: #8c1515; }
/* beside it, an outlined button copies the address, for readers with no email app; it fills white when done */
.copy-addr { display: none; }
.js .copy-addr { display: inline-block; margin-left: .45rem; line-height: inherit; cursor: pointer; }
#contact .button.copy-addr { background-color: transparent; color: #ffffff; border-color: rgba(255,255,255, .7);
                             background-image: linear-gradient(#ffffff, #ffffff); }
#contact .button.copy-addr:hover, #contact .button.copy-addr.done { background-color: transparent; color: #8c1515;
                             border-color: #ffffff; background-size: 100% 100%; }
#contact .button.copy-addr:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
footer { border-top-color: rgba(182,177,169,.35); }

/* ---------- hover lift for the new cards ---------- */
@media (hover: hover) {
  .talk-card:hover, .fund:hover, .course:hover, .student:hover, .journal:hover {
    transform: translateY(-3px); box-shadow: var(--lift); border-color: rgba(182,177,169,.35);
  }
  .journal:hover .j-go { transform: translateX(4px); }
  #contact .contact-card:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0, .6); }
}

/* ---------- progress bar and back-to-top ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: 0 50%;
}
.to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40; width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); border: 1px solid var(--gold); color: #dad7cb; box-shadow: var(--lift);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .3s, background-color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }
.to-top svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8;
              stroke-linecap: round; stroke-linejoin: round; }

/* ---------- motion ---------- */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .85s cubic-bezier(.2, .7, .2, 1), transform .85s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .chapter-title.reveal::after { transform: scaleX(0); transform-origin: 0 50%;
                                   transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .25s; }
.js .chapter-title.reveal.in::after { transform: scaleX(1); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cue { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; }
                 100% { opacity: 0; transform: translateY(12px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(182,177,169,.6); }
                   70% { box-shadow: 0 0 0 9px rgba(182,177,169,0); }
                   100% { box-shadow: 0 0 0 0 rgba(182,177,169,0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-inner > :nth-child(2) { animation-delay: .12s; }
  .hero-inner > :nth-child(3) { animation-delay: .26s; }
  .hero-inner > :nth-child(4) { animation-delay: .4s; }
  .hero-inner > :nth-child(5) { animation-delay: .54s; }
  .hero-inner > :nth-child(6) { animation-delay: .68s; }
  .hero .field { animation: fade 2.2s ease both; }
  .scroll-cue { animation: fade 1s 1.4s both; }
  .scroll-cue span { animation: cue 1.9s ease-in-out infinite; }
  .news li:first-child::before { animation: pulse 2.6s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .progress, .to-top, .scroll-cue, .hero .field, .pub-search, .pub-more { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .pub[hidden] { display: grid !important; }
  .hero { min-height: auto; padding: 1rem 0; }
}

/* Hero on phones: equal-width buttons, affiliations on their own lines. */
@media (max-width: 40rem) {
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: min(100%, 17rem); }
  .hero .who .org .sep { display: none; }
  .hero .who .org a { display: block; }
}

/* =====================================================================
   About redesign: statement, portrait, path timeline, ticker, spotlight
   ===================================================================== */

/* hero spotlight that follows the mouse */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 45%), rgba(182,177,169,.17), transparent 65%);
}
.hero.lit::after { opacity: 1; }

/* research ticker under the navigation */
.ticker {
  overflow: hidden; padding: .6rem 0; background: #faf8f3; border-bottom: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
}
.ticker-track { display: flex; align-items: center; width: max-content; white-space: nowrap;
                font-family: var(--display); font-style: italic; font-size: 1.18rem; color: var(--accent); }
.ticker-track span, .ticker-track i { margin-right: 1.5rem; }
.ticker-track i { font-style: normal; font-size: .75rem; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: marquee 60s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}

/* statement */
.about-text { align-self: center; }
.statement { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.42;
             font-size: clamp(1.45rem, 1.05rem + 1.05vw, 1.95rem); color: var(--head); }
.about-links { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
               font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.about-links a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .2rem; }
.about-links a span { display: inline-block; transition: transform .25s; }
.about-links a:hover span { transform: translateX(4px); }

/* portrait: offset Fog frame, tilt */
.portrait-frame { position: relative; transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.portrait-frame::before {
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; z-index: -1;
  border: 1px solid var(--gold); border-radius: 4px; transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.portrait-frame:hover::before { transform: translate(5px, 5px); }
.about-grid { gap: 3.4rem; }

/* path timeline */
.journey { list-style: none; margin: 1.3rem 0 0; padding: 0; position: relative;
           display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.journey::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 2.2rem; height: 2px;
  background: linear-gradient(90deg, rgba(182,177,169,.55), var(--accent)); transform-origin: 0 50%;
}
.stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stop-node {
  position: relative; z-index: 1; height: 4.4rem; min-width: 4.4rem; padding: .5rem .7rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #ffffff; border: 1px solid rgba(182,177,169,.6); border-radius: 999px;
  box-shadow: 0 10px 20px -14px rgba(46,45,41,.55);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.stop-node img { height: 100%; width: auto; max-width: 3.3rem; object-fit: contain; display: block; }
.stop-node.n2 img { max-width: 2.8rem; }
.stop:hover .stop-node { transform: translateY(-3px) scale(1.04); box-shadow: var(--lift); }
.stop.now .stop-node { border-color: var(--accent); }
.stop-year { margin-top: 1rem; display: flex; align-items: center; gap: .45rem;
             font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; color: var(--accent); }
.j-now { padding: .08rem .45rem; border-radius: 999px; background: var(--accent); color: #ffffff;
         font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.stop-city { margin-top: .25rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--head); }
.stop-role { margin-top: .3rem; font-size: .92rem; line-height: 1.35; }
.stop-inst { margin-top: .1rem; font-size: .84rem; line-height: 1.4; color: var(--grey); }

.js .journey.reveal::before { transform: scaleX(0); transition: transform 1.7s cubic-bezier(.2, .7, .2, 1) .15s; }
.js .journey.reveal.in::before { transform: scaleX(1); }
.js .journey.reveal .stop { opacity: 0; transform: translateY(16px) scale(.96);
                            transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1);
                            transition-delay: calc(.3s + var(--i) * .32s); }
.js .journey.reveal.in .stop { opacity: 1; transform: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(177,4,14,.45); } 70% { box-shadow: 0 0 0 12px rgba(177,4,14,0); }
                  100% { box-shadow: 0 0 0 0 rgba(177,4,14,0); } }
@media (prefers-reduced-motion: no-preference) {
  .stop.now .stop-node::after { content: ""; position: absolute; inset: -1px; border-radius: 999px;
                                animation: ring 2.6s ease-out infinite; pointer-events: none; }
}

@media (max-width: 46rem) {
  .journey { grid-template-columns: 1fr; gap: 1.5rem; }
  .journey::before { left: 2.2rem; right: auto; top: 2.2rem; bottom: 3rem; width: 2px; height: auto; transform-origin: 50% 0;
                     background: linear-gradient(180deg, rgba(182,177,169,.55), var(--accent)); }
  .js .journey.reveal::before { transform: scaleY(0); }
  .js .journey.reveal.in::before { transform: scaleY(1); }
  .stop { display: grid; grid-template-columns: 4.4rem 1fr; column-gap: 1.1rem; align-items: start; text-align: left; }
  .stop-node { grid-row: 1 / span 4; width: 4.4rem; min-width: 0; padding: .45rem; gap: .2rem; }
  .stop-node.n2 img { max-width: 1.55rem; }
  .stop-year { margin-top: .35rem; }
}
@media print { .ticker { display: none; } }

/* Hero profile links: balanced rows when they cannot fit on one line. */
@media (max-width: 62rem) {
  .hero .profiles { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: .75rem 1.6rem; }
}
@media (max-width: 40rem) {
  .hero .profiles { grid-template-columns: repeat(2, auto); gap: .7rem 1.4rem; }
}

/* =====================================================================
   Academic journey: dotted world map with animated arcs
   ===================================================================== */
.journey-map {
  margin: 1.1rem 0 0; padding: 1.2rem 1rem .6rem; border-radius: 8px;
  background: radial-gradient(60rem 22rem at 50% 0%, rgba(182,177,169,.10), transparent 70%), #ffffff;
  border: 1px solid var(--hair);
}
.journey-map svg { display: block; width: 100%; height: auto; overflow: hidden; }
.jm-land { fill: none; stroke: rgba(182,177,169,.45); stroke-width: 3.2; stroke-linecap: round; }
.jm-route { fill: none; stroke: none; }
.jm-glow, .jm-arc { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.jm-glow { stroke: rgba(177,4,14,.16); stroke-width: 8; }
.jm-arc { stroke: var(--accent); stroke-width: 2.2; }
.jm-halo { fill: rgba(177,4,14,.15); }
.jm-dot { fill: var(--head); stroke: #ffffff; stroke-width: 2.2; }
.jm-city.now .jm-dot { fill: var(--accent); }
.jm-ping { fill: none; stroke: var(--accent); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; }
.jm-name { font-family: var(--display); font-weight: 700; font-size: 22px; fill: var(--head);
           paint-order: stroke; stroke: #ffffff; stroke-width: 5px; stroke-linejoin: round; }
.jm-year { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; fill: var(--accent);
           paint-order: stroke; stroke: #ffffff; stroke-width: 4px; }
.jm-traveler { fill: #ffffff; stroke: var(--accent); stroke-width: 2.4; opacity: 0; }
.journey-map.live .jm-traveler { opacity: 1; }
@keyframes jm-ping { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: no-preference) {
  .jm-ping { animation: jm-ping 2.4s ease-out infinite; }
}

/* reveal choreography: land fades in, each city lights up, arcs draw between them */
.js .journey-map.reveal .jm-land { opacity: 0; transition: opacity 1.2s ease; }
.js .journey-map.reveal.in .jm-land { opacity: 1; }
.js .journey-map.reveal .jm-glow, .js .journey-map.reveal .jm-arc {
  stroke-dashoffset: 1; transition: stroke-dashoffset 1.15s cubic-bezier(.55, .05, .3, 1) var(--a, 0s);
}
.js .journey-map.reveal.in .jm-glow, .js .journey-map.reveal.in .jm-arc { stroke-dashoffset: 0; }
.js .journey-map.reveal .jm-city { opacity: 0; transition: opacity .6s ease var(--c, 0s); }
.js .journey-map.reveal.in .jm-city { opacity: 1; }

/* legend under the map: the same four stops, no connecting line */
.journey.legend { margin-top: 1.2rem; }
.journey.legend::before { display: none; }
.journey.legend .stop-node { height: 3.8rem; min-width: 3.8rem; }

@media (max-width: 46rem) {
  .journey-map { padding: .7rem .4rem .3rem; }
  .jm-name, .jm-year { display: none; }          /* too small to read; the legend below names each stop */
  .jm-dot { stroke-width: 3; }
}

/* =====================================================================
   Hero v3: text left, arch portrait right, collider event display behind
   ===================================================================== */
.hero { text-align: left; }
.hero::before {                                   /* fine paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .field { -webkit-mask-image: none; mask-image: none; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); align-items: center; gap: 3.5rem;
              width: 100%; max-width: 68rem; }
.hero-text { min-width: 0; }
.hero .name { font-size: clamp(3.3rem, 1.4rem + 5.2vw, 6rem); }
.hero .who::before { margin: 0 0 1.1rem; }
.hero .tagline { margin: 1.3rem 0 0; white-space: normal; font-size: clamp(1.2rem, .95rem + .75vw, 1.55rem); }
.hero-cta { justify-content: flex-start; }
.hero .contact { align-items: flex-start; }
.hero .profiles { justify-content: flex-start; }
@media (max-width: 62rem) { .hero .profiles { justify-content: start; } }

/* name: letters rise one by one */
.name .w { display: inline-block; white-space: nowrap; }
.name .ch { display: inline-block; }
@keyframes letter { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); }
                    to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: none; }
  .hero-text > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-text > :nth-child(1) { animation: none; }
  .hero-text > :nth-child(2) { animation-delay: .75s; }
  .hero-text > :nth-child(3) { animation-delay: .9s; }
  .hero-text > :nth-child(4) { animation-delay: 1.05s; }
  .hero-text > :nth-child(5) { animation-delay: 1.2s; }
  .name .ch { animation: letter .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.1s + var(--i) * .05s); }
  .hero-portrait { animation: portrait-in 1.4s cubic-bezier(.2, .7, .2, 1) .3s both; }
}
@keyframes portrait-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* arch portrait with an offset Fog outline */
.hero-portrait {
  position: relative; margin: 0; justify-self: center; width: min(19rem, 100%); aspect-ratio: 4 / 5.3;
  cursor: pointer; transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform;
}
.hero-portrait::before {
  content: ""; position: absolute; inset: -1rem 1rem 1rem -1rem; border: 1px solid rgba(182,177,169,.8);
  border-radius: 999px 999px 10px 10px; pointer-events: none;
}
.arch {
  position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 10px 10px; background: #dfded8;
  box-shadow: 0 0 0 1px rgba(182,177,169,.55), 0 34px 60px -34px rgba(46,45,41,.65);
}
.arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
            filter: sepia(.07) saturate(1.03); }
.arch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(180deg, rgba(182,177,169,.06), transparent 40%, rgba(46,45,41,.16)); }

@media (max-width: 52rem) {
  .hero { text-align: center; padding-top: 3.5rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-portrait { order: -1; width: min(13rem, 62vw); }
  .hero .who::before { margin: 0 auto 1.1rem; }
  .hero .tagline { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero .contact { align-items: center; }
  .hero .profiles { justify-content: center; }
  .hero-br { display: none; }
}

/* About without the duplicate portrait */
.about-grid.solo { grid-template-columns: minmax(0, 1fr); }
.about-grid.solo .statement { max-width: 50rem; font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.05rem); }

/* keep the event display away from the text column; compact CTA row */
@media (min-width: 52.01rem) {
  .hero .field {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 46%, #000000 60%);
            mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.35) 46%, #000000 60%);
  }
  .hero-cta { flex-wrap: nowrap; gap: .7rem; }
  .hero-cta .btn { padding: .85rem 1.2rem; letter-spacing: .15em; white-space: nowrap; }
}
@media (max-width: 52rem) {
  .hero .field {
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000000 0%, #000000 30%, transparent 62%);
            mask-image: radial-gradient(circle at 50% 22%, #000000 0%, #000000 30%, transparent 62%);
  }
}

/* Hero portrait: a rectangle in the photo's own 4:5 proportions */
.hero-portrait { aspect-ratio: 4 / 5; width: min(19.5rem, 100%); }
.hero-portrait::before { border-radius: 6px; inset: -1rem 1rem 1rem -1rem; }
.arch { border-radius: 6px; }
.arch img { object-position: 50% 50%; }
@media (max-width: 52rem) { .hero-portrait { width: min(13.5rem, 64vw); } }

/* Hero portrait: a little smaller, no outline behind it */
.hero-portrait { width: min(16.5rem, 100%); }
.hero-portrait::before { display: none; }
@media (max-width: 52rem) { .hero-portrait { width: min(12rem, 58vw); } }

/* Hero v4: text left, the event display takes the stage on the right */
.hero-stage { justify-self: stretch; align-self: stretch; min-height: 26rem; cursor: pointer; }
@media (max-width: 52rem) {
  .hero-stage { order: -1; min-height: 17rem; }
  .hero .field {
    -webkit-mask-image: radial-gradient(circle at 50% 13rem, #000000 0%, #000000 24%, transparent 56%);
            mask-image: radial-gradient(circle at 50% 13rem, #000000 0%, #000000 24%, transparent 56%);
  }
}

/* About portrait: no offset outline behind it */
.portrait-frame::before { display: none; }

/* Journey map v2: filled land with a coastline and a faint graticule */
.jm-grat { fill: none; stroke: rgba(177,4,14,.13); stroke-width: .7; }
.jm-land { fill: #edece7; stroke: #cdcdc6; stroke-width: .8; stroke-linejoin: round; }

/* =====================================================================
   Multi-page site: menu with brand, compact page headers, explore grid
   ===================================================================== */

/* menu: name on the left, pages on the right */
.nav-inner { display: flex; align-items: center; gap: 1.6rem; }
.brand { flex: none; font-family: var(--display); font-weight: 600; font-size: 1.28rem; letter-spacing: .01em;
         color: #ffffff; text-decoration: none; white-space: nowrap; transition: color .2s; }
.brand:hover { color: #dad7cb; }
.nav-inner nav { flex: 1; justify-content: flex-end; gap: .2rem; min-width: 0; }
.nav-inner nav a:first-child { margin-left: 0; }
@media (max-width: 51rem) {
  .nav-inner { gap: .9rem; }
  .nav-inner nav { justify-content: flex-start; }
}
@media (max-width: 40rem) { .brand { display: none; } }

/* compact page header on the inner pages */
.page-hero { min-height: 0; padding: 3.4rem 0 3.2rem; }
.page-hero .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 2rem; }
.page-hero .hero-stage { min-height: 15rem; }
.crumb { margin: 0 0 .8rem; display: flex; gap: .55rem; align-items: center;
         font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
         color: var(--accent); }
.crumb a { color: var(--grey); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--gold); }
.page-title { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.02;
              font-size: clamp(2.8rem, 1.6rem + 3.6vw, 4.6rem); color: var(--head); }
.page-sub { margin: 1rem 0 0; max-width: 32rem; font-family: var(--display); font-style: italic; font-weight: 500;
            font-size: clamp(1.15rem, .95rem + .6vw, 1.4rem); line-height: 1.4; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero .hero-text > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .page-hero .hero-text > :nth-child(1) { animation-delay: .05s; }
  .page-hero .hero-text > :nth-child(2) { animation-delay: .15s; }
  .page-hero .hero-text > :nth-child(3) { animation-delay: .28s; }
}
@media (max-width: 52rem) {
  .page-hero { padding: 2.6rem 0 2.4rem; text-align: left; }
  .page-hero .hero-inner { grid-template-columns: 1fr; }
  .page-hero .hero-stage, .page-hero .field { display: none; }
  .page-hero .crumb { justify-content: flex-start; }
}

/* inner pages: no section numbers, and room above the first section */
body:not(.page-index) .chapter-title::before { content: none; }
body:not(.page-index) main > .chapter:first-child { padding-top: 2.4rem; }

/* the contact band is dark on every page, whatever its position */
#explore { --sec: #d1660f; --tint: #f8f7f1; }
main > #contact.chapter { padding-bottom: 2.8rem; }
main > #contact.chapter::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: #8c1515; border: 0;
}

/* explore grid on the home page */
.explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 52rem) { .explore { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .explore { grid-template-columns: 1fr; } }
.ex-card {
  --c: #417865;
  position: relative; display: flex; flex-direction: column; gap: .45rem; min-height: 9.5rem;
  padding: 1.2rem 1.3rem 1.2rem; text-decoration: none; color: var(--ink);
  background: #ffffff; border: 1px solid var(--hair); border-top: 2px solid var(--c); border-radius: 6px;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.ex-card:nth-child(2) { --c: #651c32; }
.ex-card:nth-child(3) { --c: #006b81; }
.ex-card:nth-child(4) { --c: #d1660f; }
.ex-card:nth-child(5) { --c: #620059; }
.ex-card:nth-child(6) { --c: #8c1515; }
.ex-card .kicker { color: var(--c); }
.ex-title { padding-right: 1.6rem; font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; color: var(--head); }
.ex-meta { margin-top: auto; font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.ex-go { position: absolute; right: 1.1rem; top: 1.05rem; font-size: 1.1rem; color: var(--gold); transition: transform .25s; }
@media (hover: hover) {
  .ex-card:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: rgba(182,177,169,.35); }
  .ex-card:hover .ex-go { transform: translateX(4px); color: var(--c); }
}

/* Contact page */
#reach { --sec: #8c1515; }
.reach { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1rem; }
@media (max-width: 52rem) { .reach { grid-template-columns: 1fr; } }
.reach-card { padding: 1.3rem 1.4rem 1.4rem; background: #ffffff; border: 1px solid var(--hair);
              border-top: 2px solid var(--sec); border-radius: 6px;
              transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.reach-card .kicker { color: var(--sec); margin-bottom: .7rem; }
.reach-card p { margin: .7rem 0 0; font-size: .96rem; }
.reach-big { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 1.55rem;
             color: var(--head); text-decoration: none; border-bottom: 1px solid var(--rule); }
.reach-big:hover { color: var(--accent); border-bottom-color: var(--accent); }
.reach-addr { line-height: 1.6; }
.reach-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.reach-links a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--head); }
.reach-links a:hover { color: var(--accent); }
.reach-links .ico { width: 1.9rem; height: 1.9rem; padding: .4rem; border-radius: 50%;
                    border: 1px solid rgba(182,177,169,.55); color: var(--accent); background: #ffffff; }
@media (hover: hover) { .reach-card:hover { transform: translateY(-3px); box-shadow: var(--lift); } }

/* =====================================================================
   Stanford's colours: final palette roles
   ===================================================================== */
:root {
  --navy: #8c1515;           /* Cardinal red: menu, buttons, bands, the name */
  --head: #2e2d29;           /* Stanford black: headings and strong type */
  --accent: #b1040e;         /* links: digital red, Stanford's colour for links on the web */
  --gold: #b6b1a9;           /* Fog: rules, frames, ornaments */
  --rule: rgba(177,4,14, .30);
  --c-fi: #8c1515;  --c-fi-bg: #f6ecec;     /* Feynman integrals: Cardinal */
  --c-pheno: #175e54; --c-pheno-bg: #e9f1f0; /* phenomenology: Palo Alto green */
  --c-soft: #016895;  --c-soft-bg: #e8f1f5;  /* software: Sky */
}
.masthead { background:
    radial-gradient(55rem 22rem at 90% -30%, rgba(182,177,169, .16), transparent 70%),
    radial-gradient(40rem 20rem at 0% 100%, rgba(46,45,41, .04), transparent 70%),
    linear-gradient(180deg, #f8f6f1 0%, var(--paper) 100%); }
.hero-text .tagline, .page-sub { color: #8c1515; }

/* =====================================================================
   Smart motion
   ===================================================================== */

/* 1. opening reveal, once per visit (the collision, below): the header waits for it before it rises */
.intro-on .hero-text > *, .intro-on .name .ch { animation-play-state: paused; }

/* 2. page transitions between pages (browsers that support cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 3. section titles rise out of a mask */
.js .chapter-title.reveal { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(40%);
                            transition: clip-path 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .chapter-title.reveal.in { clip-path: inset(-10% 0 -30% 0); transform: none; }

/* 4. page titles: letters rise one by one (split in build.py) */
.page-title .w { display: inline-block; white-space: nowrap; }
.page-title .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .page-title .ch { animation: letter .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.15s + var(--i) * .035s); }
}

/* 5. the About portrait is unveiled with a wipe */
.js .portrait-frame.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0);
                             transition: clip-path 1.25s cubic-bezier(.76, 0, .24, 1); }
.js .portrait-frame.reveal.in { clip-path: inset(0 0 0 0); }

/* 6. magnetic buttons (motion set by JS) */
.btn, .button, .pub-more { will-change: transform; }

/* 7. a soft sheen sweeps across cards on hover */
.ex-card, .pick, .card, .talk-card, .fund, .journal, .course, .student, .reach-card, .theme, .blk, .interest, .tool {
  position: relative; overflow: hidden;
}
.ex-card::after, .pick::after, .card::after, .talk-card::after, .fund::after, .journal::after, .course::after,
.student::after, .reach-card::after, .theme::after, .interest::after, .tool::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255, .55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .ex-card:hover::after, .pick:hover::after, .card:hover::after, .talk-card:hover::after, .fund:hover::after,
  .journal:hover::after, .course:hover::after, .student:hover::after, .reach-card:hover::after,
  .theme:hover::after, .interest:hover::after, .tool:hover::after { transform: translateX(120%); }
}

/* 8. hero parallax (values set by JS) */
.hero-text, .hero .field { will-change: transform, opacity; }

/* 9. explore cards: a large faint editorial numeral */
.ex-num { position: absolute; right: 1rem; bottom: -.9rem; font-family: var(--display); font-weight: 600;
          font-size: 4.6rem; line-height: 1; color: var(--c); opacity: .08; pointer-events: none;
          transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
@media (hover: hover) { .ex-card:hover .ex-num { transform: translate(-6px, -6px); opacity: .16; } }

/* 10. menu links: underline grows from the centre */
.navbar nav a { position: relative; border-bottom: 0; }
.navbar nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: .15rem; height: 1.5px;
                       background: var(--gold); transition: left .3s cubic-bezier(.2, .7, .2, 1), right .3s cubic-bezier(.2, .7, .2, 1); }
.navbar nav a:hover::after, .navbar nav a.here::after { left: .5rem; right: .5rem; }
.navbar nav a.here { color: #dad7cb; }

@media (prefers-reduced-motion: reduce) {
  .intro-on .intro { display: none; }
  .ex-card::after, .pick::after, .card::after, .talk-card::after, .fund::after, .journal::after, .course::after,
  .student::after, .reach-card::after, .theme::after, .interest::after, .tool::after { display: none; }
  .js .chapter-title.reveal, .js .portrait-frame.reveal { clip-path: none; transform: none; }
}
@media print { .intro { display: none !important; } }

/* stacked layouts: keep the event display inside its stage, clear of the name */
@media (max-width: 52rem) {
  .hero:not(.page-hero) .field {
    -webkit-mask-image: radial-gradient(circle at 50% 12rem, #000000 0%, #000000 30%, transparent 46%);
            mask-image: radial-gradient(circle at 50% 12rem, #000000 0%, #000000 30%, transparent 46%);
  }
}

/* Event display: the current process and a legend of line styles (home hero), under the detector in the
   right-hand column, its last row level with the last row of links on the left */
.hero-inner > .ev {
  position: relative; z-index: 1; grid-area: 1 / 2; align-self: end; justify-self: end; margin-bottom: var(--ev-drop, 0px);
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; pointer-events: none; text-align: right;
}
@media (min-width: 52.01rem) {
  .hero:not(.page-hero) .hero-text { grid-area: 1 / 1; }
  .hero:not(.page-hero) .hero-stage { grid-area: 1 / 2; }
  /* the first screen: the red menu bar at the top, and under it the home header down to the bottom edge */
  .hero:not(.page-hero) { min-height: min(calc(100vh - 3.8rem), 56rem); padding: 2rem 0 3.25rem; }
  @supports (min-height: 100svh) { .hero:not(.page-hero) { min-height: min(calc(100svh - 3.8rem), 56rem); } }
  .hero:not(.page-hero) .scroll-cue { bottom: .9rem; }
  /* the two rows of the legend at the pitch of the two rows of profile links, each level with one */
  .hero-inner > .ev { --ev-drop: .5rem; }
  .hero-inner > .ev .ev-legend { row-gap: 1.66rem; }
}
.ev-label { margin: 0; min-height: 1.5em; font-family: var(--display); font-style: italic; font-weight: 500;
            font-size: 1.35rem; color: var(--head); opacity: 0; transform: translateY(6px);
            transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.ev-label.on { opacity: 1; transform: none; }
.ev-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto);
             gap: .35rem 1rem; font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .12em;
             text-transform: uppercase; color: var(--grey); }
.ev-legend li { display: inline-flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.ev-legend svg { width: 2.1rem; height: .65rem; overflow: visible; }
.ev-legend path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lg-q { stroke: rgba(182,177,169, .95); stroke-width: 1.3; }
.lg-g { stroke: rgba(177,4,14, .95); stroke-width: 1.1; }
.lg-a { stroke: rgba(140,21,21, .95); stroke-width: 1.2; }
.lg-e { stroke: rgba(101,28,50, .95); stroke-width: 1.5; }
.lg-m { stroke: rgba(140,21,21, .95); stroke-width: 2.2; }
.lg-n { stroke: rgba(1,104,149, .95); stroke-width: 1.5; stroke-dasharray: 1.5 4; }
.ev-legend .lg-n-head { fill: rgba(1,104,149, .95); stroke: none; }
@media (max-width: 52rem) { .hero .ev { display: none; } }
@media print { .hero .ev { display: none; } }

/* Six research domains: one accent each, three across, two on tablets, one on phones */
.themes.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .themes.six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .themes.six { grid-template-columns: 1fr; } }
.theme.d1 { --c: #8c1515; --bg: #f6ecec; }   /* mathematical physics: Cardinal */
.theme.d2 { --c: #620059; --bg: #f2ebf2; }   /* Feynman integrals: Plum */
.theme.d3 { --c: #175e54; --bg: #e9f1f0; }   /* multi-Higgs physics: Palo Alto green */
.theme.d4 { --c: #016895; --bg: #e8f1f5; }   /* computational tools: Sky */
.theme.d5 { --c: #006b81; --bg: #ebf3f5; }   /* effective field theory: Lagunita */
.theme.d6 { --c: #651c32; --bg: #f3edef; }   /* exotic particles: Brick */

/* =====================================================================
   Page scenes: every inner page has its own animation in the header
   (drawn by assets/scenes.js), with a caption and a hint beneath it
   ===================================================================== */
.hero[data-scene] .field { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 52.01rem) {
  .page-hero[data-scene] .hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 2.6rem; }
  .page-hero[data-scene] .hero-stage { position: relative; min-height: 19.5rem; cursor: default;
                                       display: flex; flex-direction: column; justify-content: flex-end; }
}
.scene-meta { min-width: 0; text-align: right; pointer-events: none; }
.scene-cap { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.16rem;
             line-height: 1.3; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             transition: opacity .22s ease, transform .22s ease; }
.scene-cap.swap { opacity: 0; transform: translateY(3px); }
.scene-hint { margin: .35rem 0 0; font-family: var(--sans); font-size: .58rem; font-weight: 500;
              letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.scene-hint::before { content: ""; display: inline-block; vertical-align: middle; width: 1.6rem; height: 1px;
                      margin: -.15rem .65rem 0 0; background: var(--gold); }
.page-hero[data-scene="triangulation"] .hero-stage,
.page-hero[data-scene="bubbles"] .hero-stage,
.page-hero[data-scene="waves"] .hero-stage { cursor: crosshair; }
.page-hero[data-scene="spectrum"] .hero-stage,
.page-hero[data-scene="chalkboard"] .hero-stage { cursor: pointer; }
@media (max-width: 52rem) {                         /* tablets and phones: the scene sits below the title */
  .page-hero[data-scene] .field { display: block; }
  .page-hero[data-scene] .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero[data-scene] .hero-stage { display: flex; flex-direction: column; justify-content: flex-end; order: 1;
                                       position: relative; min-height: 15.5rem; }
}
@media (max-width: 30rem) { .page-hero[data-scene] .hero-stage { min-height: 14rem; } }
@media print { .scene-meta, .page-hero[data-scene] .hero-stage { display: none; } }

/* =====================================================================
   Teaching and Supervision as two pages, eight explore cards,
   and small line drawings that draw themselves
   ===================================================================== */
#supervision  { --sec: #175e54; }   /* Palo Alto green */
.explore { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 62rem) { .explore { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .explore { grid-template-columns: 1fr; } }
.ex-card:nth-child(6) { --c: #175e54; }
.ex-card:nth-child(7) { --c: #8c1515; }
.ex-card:nth-child(8) { --c: #8c1515; }
.ex-icon { display: block; width: 2.9rem; height: 1.8rem; margin: 0 0 .2rem; overflow: visible; color: var(--c); }
.ex-icon path, .th-icon path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
                               stroke-dasharray: 1; stroke-dashoffset: 0;
                               transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }
.ex-icon path.thin, .th-icon path.thin { stroke-width: 1; opacity: .7; }
.ex-icon circle, .th-icon circle { fill: currentColor; transition: opacity .6s ease 1s; }
.js .reveal:not(.in) .ex-icon path, .js .reveal:not(.in) .th-icon path { stroke-dashoffset: 1; transition: none; }
.js .reveal:not(.in) .ex-icon circle, .js .reveal:not(.in) .th-icon circle { opacity: 0; transition: none; }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ex-card:hover .ex-icon path, .theme:hover .th-icon path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .ex-icon path, .th-icon path, .ex-icon circle, .th-icon circle { transition: none; animation: none !important; }
}
.th-icon { display: block; width: 2.7rem; height: 1.7rem; margin: 0 0 .55rem; overflow: visible; color: var(--c); }
.fund-amount { font-variant-numeric: tabular-nums; }

/* scene captions and hints change smoothly; the tour caption links to the paper */
.scene-hint { transition: opacity .22s ease, transform .22s ease; }
.scene-hint.swap { opacity: 0; transform: translateY(2px); }
.scene-cap a { pointer-events: auto; color: inherit; text-decoration: none;
               background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.scene-cap a:hover { color: var(--accent); }
.page-hero[data-scene="tour"] .hero-stage, .page-hero[data-scene="medals"] .hero-stage,
.page-hero[data-scene="mentoring"] .hero-stage, .page-hero[data-scene="timeline"] .hero-stage { cursor: pointer; }
.page-hero[data-scene="globe"] .hero-stage { cursor: grab; touch-action: pan-y; }
.page-hero[data-scene="globe"] .hero-stage:active { cursor: grabbing; }
.scene-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* small drawings inside the cards of each page (draw on reveal, redraw on hover) */
.ix { display: block; width: 2.5rem; height: 1.6rem; overflow: visible; color: var(--sec, var(--gold)); }
.ix path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
           stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1) .25s; }
.ix path.thin { stroke-width: 1; opacity: .7; }
.ix circle { fill: currentColor; transition: opacity .6s ease 1s; }
.ix text { fill: currentColor; font-family: var(--sans); font-weight: 700; letter-spacing: .02em;
           transition: opacity .6s ease .9s; }
.js .reveal:not(.in) .ix path { stroke-dashoffset: 1; transition: none; }
.js .reveal:not(.in) .ix circle, .js .reveal:not(.in) .ix text { opacity: 0; transition: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pick:hover .ix path, .card:hover .ix path, .fund:hover .ix path, .course:hover .ix path,
  .student:hover .ix path, .reach-card:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) { .ix path, .ix circle, .ix text { transition: none; animation: none !important; } }
.pick .ix { margin: 0 0 .7rem; color: var(--c, var(--sec)); }
.card .ix { margin: 0 0 .65rem; }
.course, .student, .reach-card { position: relative; }
.course .ix, .student .ix, .reach-card .ix { position: absolute; top: 1.15rem; right: 1.2rem; }
.fund { position: relative; }
.fund .fund-medal { position: absolute; right: 1.3rem; bottom: 1.15rem; width: 2.3rem; height: 2.4rem; color: #d1660f; }
.ex-num { font-size: 3.6rem; }
.tool { position: relative; }
.tool .ix { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 1.4rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tool:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); } }
.tool .kicker { padding-right: 2.8rem; }
.interest { position: relative; }
.interest .ix { position: absolute; top: 1.1rem; right: 1.2rem; color: var(--c, var(--sec)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .interest:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); } }
.course .kicker, .course .course-title, .student .kicker, .student .student-name,
.interest .kicker, .reach-card .kicker { padding-right: 3rem; }
/* home: icons in the number boxes and on the news timeline */
.stat .ix { margin: 0 auto .35rem; width: 2.1rem; height: 1.35rem; color: var(--c); }
.news li { grid-template-columns: 3.4rem 1.7rem 1fr; }
.news li .ix { width: 1.7rem; height: 1.1rem; margin-top: .2rem; color: var(--gold); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stat:hover .ix path, .news li:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
}
.tc-top .tc-ix { display: inline-block; vertical-align: -.32rem; width: 1.65rem; height: 1.05rem; margin-right: .55rem; color: var(--sec); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .talk-card:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); } }
@media (max-width: 30rem) { .scene-cap { font-size: 1.04rem; } }

/* Contact: a small clock with the local time at SLAC */
.local-time { display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem; padding-top: 1.05rem; border-top: 1px solid var(--hair); }
.local-time .clock { width: 2.7rem; height: 2.7rem; flex: none; }
.local-time .face { fill: #ffffff; stroke: var(--gold); stroke-width: 1.1; }
.local-time .tick { stroke: var(--head); stroke-width: .9; opacity: .45; }
.local-time .h, .local-time .m, .local-time .s { stroke-linecap: round; }
.local-time .h { stroke: var(--head); stroke-width: 2.1; }
.local-time .m { stroke: var(--head); stroke-width: 1.35; }
.local-time .s { stroke: #651c32; stroke-width: .7; }
.local-time .hub { fill: var(--gold); }
.lt-label { display: block; font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.lt-time { display: block; margin-top: .15rem; font-family: var(--serif); font-size: 1.08rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.lt-zone { font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .12em; color: var(--grey); }
.lt-diff { display: block; margin-top: .12rem; font-family: var(--sans); font-size: .72rem; color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .local-time .s { display: none; } }

/* Explore cards: the numeral sits on the line of the label, fully in view */
.ex-num { top: 3.62rem; bottom: auto; right: 1.15rem; font-size: 1.85rem; opacity: .5; letter-spacing: .02em; }
@media (hover: hover) { .ex-card:hover .ex-num { transform: translateY(-2px); opacity: .9; } }

/* Home: slow washes of grey behind the hero */
.hero .aurora { position: absolute; inset: -18%; z-index: 0; pointer-events: none; filter: blur(28px);
  background:
    radial-gradient(32% 36% at 18% 28%, rgba(46,45,41, .06), transparent 70%),
    radial-gradient(30% 34% at 80% 58%, rgba(182,177,169, .26), transparent 70%),
    radial-gradient(26% 28% at 58% 12%, rgba(46,45,41, .04), transparent 70%),
    radial-gradient(28% 30% at 34% 86%, rgba(182,177,169, .14), transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
  .hero .aurora { animation: aurora 28s ease-in-out infinite alternate; }
  @keyframes aurora {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(3%, 2.5%, 0) rotate(7deg) scale(1.07); }
    100% { transform: translate3d(-1.5%, 3%, 0) rotate(-5deg) scale(1.02); }
  }
}

/* Home: a light runs through the name once the letters have risen */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .name .ch {
      background: linear-gradient(100deg, var(--navy) 0 38%, #cfc9c0 48%, #f8f5ec 50%, #cfc9c0 52%, var(--navy) 62% 100%);
      background-size: 320% 100%; background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: letter .9s cubic-bezier(.2, .7, .2, 1) both, shine 1.5s ease-in-out both;
      animation-delay: calc(.1s + var(--i) * .05s), calc(1.35s + var(--i) * .055s);
    }
  }
}
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Home: once the page has settled, a sheen passes over the first button */
@media (prefers-reduced-motion: no-preference) {
  .hero .btn.solid { position: relative; overflow: hidden; }
  .hero .btn.solid::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(248,245,236, .42) 50%, transparent 70%);
    transform: translateX(-120%); animation: btn-sheen 1.5s cubic-bezier(.2, .7, .2, 1) 3s 1 both; }
  .intro-on .hero .btn.solid::after { animation-play-state: paused; }
  @keyframes btn-sheen { to { transform: translateX(120%); } }
}

/* Footer: a map of the countries the site has been read from, and the number of visits */
footer .wrap.foot { row-gap: 1.6rem; }
.visitors { flex: 0 1 21rem; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.foot-meta { order: 3; flex: 1 1 100%; }               /* the meta line becomes a bar under both */
@media (min-width: 40.01rem) {
  .foot-meta { flex-direction: row-reverse; justify-content: space-between; align-items: center;
               padding-top: 1rem; border-top: 1px solid rgba(196,192,178,.16); }
}
.visitors[hidden] { display: none; }
.vis-map { position: relative; width: 100%; aspect-ratio: 1200 / 482; border-radius: 4px; }
.vis-map:focus-visible { outline: 1px solid rgba(196,192,178,.75); outline-offset: 6px; }
.vis-map img, .vis-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.vis-map img { opacity: .42; }
.vis-dots { overflow: visible; }
/* each country a bubble with its number, a thin line back to the country when the bubble had to move aside */
.vis-dots .halo { fill: url(#vis-glow); }
.vis-dots .core { fill: #ede9db; transition: fill .25s ease; }
.vis-dots .num { font-family: var(--sans); font-weight: 700; fill: #8c1515; text-anchor: middle;
                 font-variant-numeric: lining-nums tabular-nums; pointer-events: none; }
.vis-dots .ring { fill: none; stroke: #ede9db; stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vis-dots .lead { stroke: rgba(237,233,219,.55); stroke-width: .9; }
.vis-dots .spot { fill: rgba(237,233,219,.85); }
.vis-leads { transition: opacity .35s ease; }
.vb { transition: opacity .35s ease; }
.vb-in { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.vb.hov .core, .vb.on .core { fill: #fdfaf0; }
.vb.hov .vb-in { transform: scale(1.12); }
.vb.on .vb-in { transform: scale(1.28); }
.visitors.picked .vb:not(.on), .visitors.picked .vis-leads { opacity: .28; }
.visitors.rolled .vb.hot .ring { animation: vis-ping 3.2s ease-out var(--d, 0s) infinite; }
.visitors.rolled .vb.on .ring { animation: vis-ping 1.7s ease-out infinite; }
@keyframes vis-ping { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.vis-tag { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
           padding: .2rem .55rem; border-radius: 999px; background: rgba(103,29,26,.95); border: 1px solid rgba(196,192,178,.6);
           font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .03em; color: #fbf9f0;
           box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); opacity: 0; transform: translate(-50%, calc(-100% + 4px)) scale(.94);
           transition: opacity .2s ease, transform .25s ease, left .4s cubic-bezier(.2, .7, .2, 1), top .4s cubic-bezier(.2, .7, .2, 1); }
.vis-tag.on { opacity: 1; transform: translate(-50%, -100%); }
.vis-tag.below { transform: translate(-50%, -4px) scale(.94); }
.vis-tag.below.on { transform: translate(-50%, 0); }
.vis-tag.jump { transition: none; }
.vis-count { display: flex; align-items: center; gap: .2rem; font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1; color: #ffffff; }
.od { display: inline-block; width: 1.1em; height: 1.36em; overflow: hidden; border: 1px solid rgba(196,192,178,.45);
      border-radius: 3px; background: rgba(255,255,255,.04); text-align: center;
      transition: width .45s ease, border-width .45s ease, margin .45s ease, opacity .3s ease; }
.od.lead { width: 0; border-width: 0; margin-right: -.2rem; opacity: 0; }
.od-strip { display: block; transition: transform 1.9s cubic-bezier(.2, .75, .25, 1) calc(var(--i) * 120ms); }
.visitors.live .od-strip { transition-duration: .9s; transition-delay: calc(var(--i) * 60ms); }
.od-strip i { display: block; height: 1.36em; line-height: 1.36em; font-style: normal; font-variant-numeric: lining-nums tabular-nums; }
.visitors.rolled .od-strip { transform: translateY(calc(var(--n) * -1.36em)); }
.od-sep { align-self: flex-end; margin: 0 .02em .05em; font-size: .8em; color: rgba(196,192,178,.8); overflow: hidden;
          transition: width .45s ease, margin .45s ease, opacity .3s ease; }
.od-sep.lead { width: 0; margin: 0 -.1rem; opacity: 0; }
/* new visits while the page is open: a +3 rises beside the counter, and the bubbles that grew send out a ring */
.vis-count { position: relative; }
.vis-plus { position: absolute; left: 100%; top: .05em; margin-left: .5rem; pointer-events: none; opacity: 0;
            font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: #ede9db; }
.vis-plus.up { animation: vis-up 2.8s ease-out both; }
@keyframes vis-up { 0% { opacity: 0; transform: translateY(7px); } 14% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9px); } }
.visitors.rolled .vb.grew .ring { animation: vis-ping 1.2s ease-out 0s 2; }
.vb.grew .core { animation: vis-glow 1.2s ease-out 2; }
@keyframes vis-glow { 0%, 100% { fill: #ede9db; } 30% { fill: #ffffff; } }
/* under the counter, a bar for the share of all visits: full for all countries, shorter for one of them */
.vis-share { width: 5.2rem; height: 2px; margin-top: -.25rem; border-radius: 1px; background: rgba(196,192,178,.2); overflow: hidden; }
.vis-share i { display: block; height: 100%; width: var(--p, 100%); background: #ede9db; transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.vis-label, .vis-sub { font-family: var(--sans); text-transform: uppercase; text-align: center; line-height: 1.6; transition: opacity .17s ease; }
.vis-label { font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.vis-sub { margin-top: -.45rem; min-height: 1.6em; font-size: .58rem; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.62); }
.visitors.picked .vis-sub { color: rgba(237,233,219,.85); }
.vis-label.swap, .vis-sub.swap { opacity: 0; }
@media (max-width: 40rem) { .visitors { flex-basis: 100%; align-items: flex-start; } .vis-label, .vis-sub { text-align: left; } }
@media (prefers-reduced-motion: reduce) {
  .od, .od-sep, .od-strip, .vb, .vb-in, .vis-leads, .vis-tag, .vis-share i, .vis-label, .vis-sub { transition: none; }
  .visitors.rolled .vb.hot .ring, .visitors.rolled .vb.on .ring, .visitors.rolled .vb.grew .ring, .vb.grew .core { animation: none; }
}

/* Contact: copy the email address with one click, the sheets give way to a check mark */
.reach-mail { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; }
.copy-mail { display: none; position: relative; flex: none; width: 2.15rem; height: 2.15rem; padding: 0; border-radius: 50%;
             border: 1px solid var(--rule); background: transparent; color: var(--accent); cursor: pointer;
             align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .15s; }
.js .copy-mail { display: inline-flex; }
.copy-mail:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.copy-mail:active { transform: scale(.93); }
.copy-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-mail svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6;
                 stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.copy-mail .cm-a, .copy-mail .cm-b { transform-origin: 12px 12px; transition: opacity .25s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.copy-mail .cm-ok { stroke: #b1040e; stroke-width: 2.1; stroke-dasharray: 1; stroke-dashoffset: 1;
                    transition: stroke-dashoffset .45s cubic-bezier(.3, .7, .2, 1) .1s; }
.copy-mail.done { border-color: #b1040e; background: rgba(177,4,14, .08); }
.copy-mail.done .cm-a, .copy-mail.done .cm-b { opacity: 0; transform: scale(.55) rotate(-10deg); }
.copy-mail.done .cm-ok { stroke-dashoffset: 0; }
.cm-tip { position: absolute; right: 50%; bottom: calc(100% + .45rem); transform: translateY(.3rem); padding: .28rem .6rem;
          border-radius: 3px; background: var(--navy); color: #ffffff; font-family: var(--sans); font-size: .6rem; font-weight: 600;
          letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none;
          transition: opacity .25s ease, transform .25s ease; }
.copy-mail.done .cm-tip { opacity: 1; transform: none; }   /* it opens to the left, clear of the card's icon */
@media (prefers-reduced-motion: reduce) { .copy-mail *, .cm-tip { transition: none !important; } }

/* Talks: the earlier talks unfold, one row after another */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    details.more { interpolate-size: allow-keywords; }
    details.more::details-content { block-size: 0; overflow: clip;
      transition: block-size .65s cubic-bezier(.2, .7, .2, 1), content-visibility .65s allow-discrete; }
    details.more[open]::details-content { block-size: auto; }
    details.more.instant::details-content { transition: none; }
  }
  details.more[open] > .entry { animation: unfold .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--i, 0), 16) * 35ms); }
  @keyframes unfold { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Research, Software: MBConicHulls release by release, a line of versions that draws itself */
.releases { margin-top: 2.4rem; }
.rel-kicker { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
              color: var(--grey); margin-bottom: 1.15rem; }
.rel-line { list-style: none; margin: 0; padding: 0; position: relative; display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.rel-line li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; right: -1.25rem; top: .44rem; height: 1px;
                                       background: var(--gold); transform-origin: 0 50%; }   /* from each version to the next */
.rel-line li { position: relative; padding-top: 1.55rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rel-dot { position: absolute; left: 0; top: 0; width: .9rem; height: .9rem; border-radius: 50%;
           border: 1.5px solid var(--gold); background: var(--paper); box-sizing: border-box; }
.rel-line li:last-child .rel-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(182,177,169,.16); }
.rel-v { display: block; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--head);
         font-variant-numeric: lining-nums; }   /* old-style figures would read v1.0 as vi.o */
.rel-what { display: block; margin: .3rem 0 .5rem; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.rel-ref { margin-top: auto; font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 40rem) {
  .rel-line { grid-template-columns: 1fr; gap: 1.1rem; }
  .rel-line li:not(:last-child)::after { left: .44rem; right: auto; top: 1.05rem; bottom: -.95rem; width: 1px; height: auto; transform-origin: 50% 0; }
  .rel-line li { padding: 0 0 0 1.9rem; }
  .rel-v { margin-top: -.12rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .releases .rel-line li::after { transition: transform .55s cubic-bezier(.4, 0, .2, 1) calc(.55s + var(--i) * .32s); }
  .js .releases:not(.drawn) .rel-line li::after { transform: scaleX(0); }
  .js .releases .rel-line li { transition: opacity .6s ease calc(.3s + var(--i) * .32s), transform .6s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i) * .32s); }
  .js .releases:not(.drawn) .rel-line li { opacity: 0; transform: translateY(8px); }
  .js .releases .rel-dot { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(.3s + var(--i) * .32s); }
  .js .releases:not(.drawn) .rel-dot { transform: scale(0); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 40rem) {
  .js .releases:not(.drawn) .rel-line li::after { transform: scaleY(0); }
}

/* Background, as asked: a soft white page with neutral headers and bands, no tint.
   Cardinal red stays for the menu bar, the contact band and the footer. */
:root { --paper: #ffffff; --panel: #fbfaf5; }
.masthead { background:
    radial-gradient(55rem 22rem at 90% -30%, rgba(182,177,169, .15), transparent 70%),
    linear-gradient(180deg, #fbfaf5 0%, var(--paper) 100%); }
.ticker { background: #fefdf8; }
#research, #software { --tint: #fefdf8; }
main > .chapter:nth-of-type(even)::before {
  background: var(--tint, #fefdf8);
  border-top-color: rgba(182,177,169, .2); border-bottom-color: rgba(182,177,169, .2);
}
.hero .aurora { background:
    radial-gradient(32% 36% at 18% 28%, rgba(46,45,41, .05), transparent 70%),
    radial-gradient(30% 34% at 80% 58%, rgba(182,177,169, .26), transparent 70%),
    radial-gradient(26% 28% at 58% 12%, rgba(46,45,41, .04), transparent 70%),
    radial-gradient(28% 30% at 34% 86%, rgba(182,177,169, .14), transparent 72%); }

/* =====================================================================
   Dark mode: a near-black page, light type and coral red accents.
   <html data-theme="dark"> is set from the system setting until the reader
   chooses with the button in the menu bar (remembered in localStorage).
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171612; --panel: #201f1b; --ink: #e8e6e1; --grey: #b1b0ab; --hair: rgba(232,230,225, .13);
  --navy: #ffffff;                 /* headings and strong type, light on the dark page */
  --head: var(--navy);
  --accent: #f4795b; --gold: #c5c0b8; --rule: rgba(244,121,91, .32);
  --band: #8c1515;                 /* the menu bar, the contact band and the footer stay Cardinal red */
  --card: #21201c;
  --c-fi: #f4795b;    --c-fi-bg: rgba(244,121,91, .12);
  --c-pheno: #93cbbc; --c-pheno-bg: rgba(147,203,188, .11);
  --c-soft: #67afd2;  --c-soft-bg: rgba(103,175,210, .11);
  --lift: 0 0 0 1px rgba(0,0,0, .35), 0 18px 34px -18px rgba(0,0,0, .8), 0 4px 10px -4px rgba(0,0,0, .45);
  --lift-bg: #252420;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); border-top-color: var(--band); }
html[data-theme="dark"] .navbar, html[data-theme="dark"] footer, html[data-theme="dark"] .to-top,
html[data-theme="dark"] .cm-tip { background: var(--band); }
html[data-theme="dark"] .navbar { box-shadow: 0 2px 14px -6px rgba(0,0,0, .7); }

/* headers, the ticker and the alternate bands */
html[data-theme="dark"] .masthead { background:
    radial-gradient(55rem 22rem at 90% -30%, rgba(255,255,255, .05), transparent 70%),
    linear-gradient(180deg, #1f1e1b 0%, var(--paper) 100%); }
html[data-theme="dark"] .hero .aurora { background:
    radial-gradient(32% 36% at 18% 28%, rgba(255,255,255, .04), transparent 70%),
    radial-gradient(30% 34% at 80% 58%, rgba(182,177,169, .10), transparent 70%),
    radial-gradient(26% 28% at 58% 12%, rgba(255,255,255, .03), transparent 70%),
    radial-gradient(28% 30% at 34% 86%, rgba(182,177,169, .06), transparent 72%); }
html[data-theme="dark"] .ticker { background: #1c1b17; }
html[data-theme="dark"] main > .chapter:nth-of-type(even)::before {
  background: #1d1c18; border-top-color: rgba(244,121,91, .15); border-bottom-color: rgba(244,121,91, .15); }
html[data-theme="dark"] #contact { --tint: var(--band); }
html[data-theme="dark"] .hero-text .tagline, html[data-theme="dark"] .page-sub { color: #f4795b; }

/* section accents, lighter on the dark page */
html[data-theme="dark"] #about, html[data-theme="dark"] #reach { --sec: #f4795b; }
html[data-theme="dark"] #research { --sec: #9fd0bb; }
html[data-theme="dark"] #publications { --sec: #e0a1af; }
html[data-theme="dark"] #software, html[data-theme="dark"] #supervision { --sec: #93cbbc; }
html[data-theme="dark"] #talks { --sec: #98c7d5; }
html[data-theme="dark"] #funding, html[data-theme="dark"] #explore { --sec: #f9a44a; }
html[data-theme="dark"] #teaching { --sec: #d2adcb; }
html[data-theme="dark"] #refereeing { --sec: #a6b168; }
html[data-theme="dark"] #cv { --sec: #c7dcd4; }
html[data-theme="dark"] .theme.d1 { --c: #f4795b; --bg: rgba(244,121,91, .10); }
html[data-theme="dark"] .theme.d2 { --c: #d2adcb; --bg: rgba(210,173,203, .09); }
html[data-theme="dark"] .theme.d3 { --c: #93cbbc; --bg: rgba(147,203,188, .09); }
html[data-theme="dark"] .theme.d4 { --c: #c1c0ba; --bg: rgba(193,192,186, .09); }
html[data-theme="dark"] .theme.d5 { --c: #98c7d5; --bg: rgba(152,199,213, .09); }
html[data-theme="dark"] .theme.d6 { --c: #e0a1af; --bg: rgba(224,161,175, .09); }
html[data-theme="dark"] .tool, html[data-theme="dark"] .blk, html[data-theme="dark"] .ex-card { --c: #f4795b; }
html[data-theme="dark"] .tool:nth-child(2), html[data-theme="dark"] .study .blk { --c: #9fd0bb; }
html[data-theme="dark"] .tool:nth-child(3), html[data-theme="dark"] .ex-card:nth-child(6) { --c: #93cbbc; }
html[data-theme="dark"] .tool:nth-child(4), html[data-theme="dark"] .ex-card:nth-child(3) { --c: #98c7d5; }
html[data-theme="dark"] .tool:nth-child(5), html[data-theme="dark"] .ex-card:nth-child(5) { --c: #d2adcb; }
html[data-theme="dark"] .tool:nth-child(6), html[data-theme="dark"] .ex-card:nth-child(4) { --c: #f9a44a; }
html[data-theme="dark"] .ex-card:nth-child(1) { --c: #9fd0bb; }
html[data-theme="dark"] .ex-card:nth-child(2) { --c: #e0a1af; }
html[data-theme="dark"] .fund .fund-medal { color: #f9a44a; }

/* cards and panels */
html[data-theme="dark"] .blk, html[data-theme="dark"] .ex-card, html[data-theme="dark"] .reach-card,
html[data-theme="dark"] .talk-card, html[data-theme="dark"] .fund, html[data-theme="dark"] .course,
html[data-theme="dark"] .student, html[data-theme="dark"] .journal, html[data-theme="dark"] .stop-node { background: var(--card); }
html[data-theme="dark"] .stat, html[data-theme="dark"] .card, html[data-theme="dark"] .pick, html[data-theme="dark"] .interest,
html[data-theme="dark"] .tool, html[data-theme="dark"] .tongues, html[data-theme="dark"] .contact a .ico { background: rgba(255,255,255, .035); }
html[data-theme="dark"] .reach-links .ico { background: transparent; }
html[data-theme="dark"] .blk-logos { background: #f2f1eb; }          /* the logos keep a light plate */
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .pick:hover, html[data-theme="dark"] .blk:hover { box-shadow: var(--lift); }
html[data-theme="dark"] .tag.grey { background: rgba(232,230,225, .07); box-shadow: inset 0 0 0 1px rgba(232,230,225, .16); }
html[data-theme="dark"] .local-time .face { fill: var(--card); }
html[data-theme="dark"] .local-time .s { stroke: #e0a1af; }

/* buttons: light type on the bars, dark type on Fog */
html[data-theme="dark"] .btn { border-color: rgba(255,255,255, .32);
  background-image: linear-gradient(#ffffff, #ffffff); }
html[data-theme="dark"] .btn:hover { color: #171612; border-color: #ffffff; }
html[data-theme="dark"] .btn.solid { background-color: #f4795b; color: #171612; border-color: #f4795b; }
html[data-theme="dark"] .btn.solid:hover { color: #171612; }
html[data-theme="dark"] .button { background-color: var(--band); color: #ffffff; }
html[data-theme="dark"] .button:hover { background-color: var(--band); color: #171612; }
html[data-theme="dark"] #contact .button, html[data-theme="dark"] #contact .button:hover { background-color: #ffffff; color: #8c1515; }
html[data-theme="dark"] #contact .button.copy-addr { background-color: transparent; color: #ffffff; }
html[data-theme="dark"] #contact .button.copy-addr:hover, html[data-theme="dark"] #contact .button.copy-addr.done { background-color: transparent; color: #8c1515; }
html[data-theme="dark"] .filters button[aria-pressed="true"], html.js[data-theme="dark"] .pub-more:hover,
html[data-theme="dark"] .j-now { color: #171612; }
html[data-theme="dark"] .scroll-cue { border-color: rgba(255,255,255, .4); }
html.js[data-theme="dark"] .pub-search { background-color: var(--card); }
html.js[data-theme="dark"] .pub-search:focus { box-shadow: 0 0 0 3px rgba(244,121,91, .2); }
html[data-theme="dark"] .copy-mail .cm-ok { stroke: #93cbbc; }
html[data-theme="dark"] .copy-mail.done { border-color: #93cbbc; background: rgba(147,203,188, .1); }

/* the journey map on the home page */
html[data-theme="dark"] .journey-map { background: radial-gradient(60rem 22rem at 50% 0%, rgba(244,121,91, .08), transparent 70%), #1c1b17; }
html[data-theme="dark"] .jm-land { fill: #2d2c28; stroke: #35544d; }
html[data-theme="dark"] .jm-grat { stroke: rgba(147,203,188, .12); }
html[data-theme="dark"] .jm-glow { stroke: rgba(147,203,188, .14); }
html[data-theme="dark"] .jm-halo { fill: rgba(147,203,188, .14); }
html[data-theme="dark"] .jm-dot { stroke: #1c1b17; }
html[data-theme="dark"] .jm-name, html[data-theme="dark"] .jm-year { stroke: #1c1b17; }
html[data-theme="dark"] .jm-traveler { fill: #171612; }

/* the legend of the event display */
html[data-theme="dark"] .lg-q { stroke: rgba(195,191,177, .95); }
html[data-theme="dark"] .lg-g { stroke: rgba(130,192,176, .95); }
html[data-theme="dark"] .lg-a { stroke: rgba(211,206,191, .95); }
html[data-theme="dark"] .lg-e { stroke: rgba(222,138,157, .95); }
html[data-theme="dark"] .lg-m { stroke: rgba(244,244,244, .95); }
html[data-theme="dark"] .lg-n { stroke: rgba(188,187,182, .95); }
html[data-theme="dark"] .ev-legend .lg-n-head { fill: rgba(188,187,182, .95); }

/* the switch in the menu bar: a moon by day, a sun by night */
.theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
                margin-left: .4rem; padding: 0; border-radius: 50%; border: 1px solid rgba(218,215,203, .4);
                background: transparent; color: #dad7cb; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.theme-toggle:hover { border-color: #dad7cb; background: rgba(218,215,203, .1); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid #dad7cb; outline-offset: 2px; }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { transform-origin: 12px 12px; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.theme-toggle .tt-moon { fill: currentColor; fill-opacity: .18; }
.theme-toggle .tt-sun { opacity: 0; transform: rotate(-60deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(40deg) scale(.5); }
@media (max-width: 51rem) { .theme-toggle { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-sun, .theme-toggle .tt-moon { transition: none; } }
/* while the theme changes, the new page is revealed in a circle from the switch (set by JS) */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Funding: once its amount has counted up, the medal on the card gives a small wobble */
@media (prefers-reduced-motion: no-preference) {
  .fund.counted .fund-medal { transform-origin: 50% 40%; animation: medal-wobble 1.2s cubic-bezier(.3, .6, .3, 1) both; }
  @keyframes medal-wobble {
    0% { transform: none; } 20% { transform: rotate(-10deg) scale(1.12); } 45% { transform: rotate(7deg) scale(1.05); }
    70% { transform: rotate(-3deg); } 100% { transform: none; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle.hint { animation: tt-hint 1.7s ease-out 1.4s 3; }
  @keyframes tt-hint { 0% { box-shadow: 0 0 0 0 rgba(218,215,203, .6); } 100% { box-shadow: 0 0 0 11px rgba(218,215,203, 0); } }
}

@media print { .theme-toggle { display: none !important; } }

/* Research tour: horizontal swipes go to the tour, vertical ones still scroll the page */
[data-scene="tour"] .hero-stage { touch-action: pan-y; }

/* The page not found keeps its detector on tablets and phones, below the title,
   so that the missing neutrino can be seen there too */
@media (max-width: 52rem) {
  .page-404 .page-hero .hero-stage { display: block; order: 1; min-height: 16rem; margin: .9rem 0 .8rem; }
  .page-404 .page-hero .field {
    display: block;
    -webkit-mask-image: radial-gradient(circle at 50% calc(100% - 11.2rem), #000000 0%, #000000 26%, transparent 58%);
            mask-image: radial-gradient(circle at 50% calc(100% - 11.2rem), #000000 0%, #000000 26%, transparent 58%);
  }
}

/* Research domains: on hover each little drawing does what it stands for. The terms of a series fill
   its cone from the apex outwards, a loop momentum runs around the box, an excess lights up its mass
   window, the cursor blinks after the code, the couplings run with the scale, and a new particle is
   exchanged between two vertices. */
.th-icon circle.run { opacity: 0; }
.th-icon .win { fill: currentColor; stroke: none; opacity: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme.d1:hover .th-icon circle { transform-box: fill-box; transform-origin: center;
                                    animation: th-lit .8s ease both; animation-delay: calc(var(--k, 0) * 90ms + .35s); }
  .theme.d2:hover .th-icon .run { animation: th-loop 2.4s linear .5s infinite; }
  .theme.d3:hover .th-icon .win { animation: th-win 2.2s ease-in-out .3s infinite; }
  .theme.d4:hover .th-icon .cur { animation: th-blink 1.05s steps(1) .3s infinite; }
  .theme.d5:hover .th-icon .run { animation: th-flow 2.1s linear .3s infinite; }
  .theme.d5:hover .th-icon .run:nth-of-type(2) { animation-delay: .6s; }
  .theme.d5:hover .th-icon .run:nth-of-type(3) { animation-delay: .9s; }
  .theme.d6:hover .th-icon .run { animation: th-hop 1.5s ease-in-out .4s infinite; }
}
@keyframes th-lit { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.9); } }
@keyframes th-loop { 0% { opacity: 1; transform: translate(0, 0); } 25% { transform: translate(16px, 0); }
                     50% { transform: translate(16px, 14px); } 75% { transform: translate(0, 14px); } 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes th-win { 0%, 100% { opacity: 0; } 50% { opacity: .2; } }
@keyframes th-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes th-flow { 0% { opacity: 0; transform: translate(0, 0); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes th-hop { 0% { opacity: 0; transform: translate(0, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, 0); } }

/* Card drawings on the teaching and supervision pages: on hover their lines run the way the physics goes
   (the dash sizes come from build.py, as fractions of each path's length) */
@property --run { syntax: '<number>'; inherits: false; initial-value: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .course:hover .ix path.flow, .student:hover .ix path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
}
@keyframes ix-flow { from { --run: 0; } to { --run: 1; } }

/* Research page cards: the conic hull's lattice points light up from the apex, the two photons of the
   95 GeV scalar fly apart, and HyperPrecision's sight narrows onto its target */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pick:hover .ix circle[style*="--k"], .card:hover .ix circle[style*="--k"] {
    transform-box: fill-box; transform-origin: center; animation: th-lit .8s ease both; animation-delay: calc(var(--k) * 90ms + .35s); }
  .pick:hover .ix path.flow, .card:hover .ix path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
  .card:hover .ix path.focus { transform-box: view-box; transform-origin: 24px 15px; animation: ix-focus 1.6s ease-in-out .3s infinite; }
}
@keyframes ix-focus { 0%, 100% { transform: scale(1); } 50% { transform: scale(.5); } }

/* Publications: a Download PDF button for every paper on arXiv, a small version of the CV button.
   Outlined in Cardinal and filled on hover, so that red stays an accent on the long lists. */
.links a.button.pdf { display: inline-flex; align-items: center; gap: .42rem; margin-right: .1rem;
                      font-size: .6rem; letter-spacing: .12em; padding: .36rem .72rem .34rem;
                      background-color: transparent; border: 1px solid rgba(140,21,21, .5); color: var(--navy); }
.links a.button.pdf:hover { color: #ffffff; border-color: var(--navy); }
.links a.button.pdf .dl { width: .8rem; height: .8rem; flex: none; fill: none; stroke: currentColor;
                          stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .links a.button.pdf:hover .dl path { animation: dl-drop .7s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes dl-drop { 0% { transform: translateY(-3px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.meta .au { white-space: nowrap; }

/* =====================================================================
   Software page: each package with its versions, what it needs and how to get it
   ===================================================================== */
#packages, #library { --sec: #175e54; }
.pkg { position: relative; margin: 1.6rem 0 0; padding: 1.6rem 1.7rem 1.5rem; background: var(--card, #ffffff);
       border: 1px solid var(--hair); border-top: 2px solid var(--gold); border-radius: 4px; }
.pkg + .pkg { margin-top: 1.4rem; }
.pkg-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pkg-head .ix { position: static; width: 2.9rem; height: 1.8rem; flex: none; color: var(--sec); }
.pkg-title { flex: 1; min-width: 12rem; }
.pkg-title h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--head); }
.pkg-tagline { margin: .15rem 0 0; font-family: var(--display); font-style: italic; font-size: 1.08rem; color: var(--accent); }
.pkg-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.pkg-badges .tag { margin: 0; }
.pkg-what { margin: .95rem 0 .9rem; max-width: 46rem; }
.pkg-actions { margin-top: .2rem; gap: .5rem .9rem; }
.links a.button.gh { display: inline-flex; align-items: center; gap: .45rem; font-size: .6rem; letter-spacing: .12em;
                     padding: .36rem .75rem .34rem; background-color: transparent; border: 1px solid rgba(140,21,21, .5); color: var(--navy); }
.links a.button.gh:hover { color: #ffffff; border-color: var(--navy); }
html[data-theme="dark"] .links a.button.pdf, html[data-theme="dark"] .links a.button.gh { background-color: transparent; color: #f4795b; border-color: rgba(244,121,91, .5); }
html[data-theme="dark"] .links a.button.pdf:hover, html[data-theme="dark"] .links a.button.gh:hover { color: #171612; border-color: #f4795b; }
.links a.button.gh .ico { width: .9rem; height: .9rem; }
.pkg .releases { margin-top: 1.7rem; }
.rel-when { display: block; margin-top: .15rem; font-family: var(--sans); font-size: .62rem; font-weight: 600;
            letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.pkg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.1rem 1.6rem;
             margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--hair); }
.pkg-fact .kicker { margin-bottom: .45rem; }
.pkg-fact ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.55; }
.pkg-fact li { margin: 0 0 .2rem; }
.pkg-fact .muted { color: var(--grey); font-size: .86em; }
.pkg-files code, .pkg-code code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; }
.pkg-code { margin: 0; padding: .65rem .8rem; background: var(--panel, #fbfaf5); border: 1px solid var(--hair); border-radius: 3px;
            overflow-x: auto; white-space: pre; line-height: 1.55; }
.pkg-note { margin: .45rem 0 0; font-size: .82rem; color: var(--grey); }
@media (max-width: 34rem) {
  .pkg { padding: 1.25rem 1.05rem 1.2rem; }
  .pkg-title h3 { font-size: 1.5rem; }
  .pkg-code code { font-size: .72rem; }
}
html[data-theme="dark"] .pkg { background: var(--card); border-color: rgba(244,121,91,.18); border-top-color: var(--gold); }
html[data-theme="dark"] .pkg-code { background: rgba(255,255,255,.04); border-color: rgba(244,121,91,.16); }
html[data-theme="dark"] #packages, html[data-theme="dark"] #library { --sec: #93cbbc; }

/* the Explore grid now has nine cards: three by three */
.explore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 44rem) { .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .explore { grid-template-columns: 1fr; } }
.ex-card:nth-child(9) { --c: #40665f; }
html[data-theme="dark"] .ex-card:nth-child(9) { --c: #aecfc6; }

/* nine pages in the menu: a little less spacing so they fit beside the name, which steps aside on
   small laptop windows (the menu scrolls sideways on tablets and phones, as before) */
@media (min-width: 51.01rem) {
  .navbar nav { letter-spacing: .07em; gap: .05rem; }
  .navbar nav a { padding-left: .36rem; padding-right: .36rem; }
}
@media (min-width: 51.01rem) and (max-width: 60rem) { .brand { display: none; } }

/* arXiv keeps its own capitals, also where the labels around it are in small capitals */
.links a.arx, .rel-ref.arx { text-transform: none; letter-spacing: .03em; font-size: .74rem; }
.scene-hint .arx { text-transform: none; letter-spacing: .05em; }
.pkg-get { grid-column: 1 / -1; }                     /* the whole command on one line where it fits */
.pkg-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Journey logos: each on a white disc of its own, a little bigger, two institutions overlapping slightly */
.stop-node, .journey.legend .stop-node { height: auto; min-width: 0; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; }
html[data-theme="dark"] .stop-node { background: none; }
.logo-disc { position: relative; width: 4.7rem; height: 4.7rem; flex: none; border-radius: 50%; display: grid; place-items: center;
             background: #ffffff; border: 1px solid rgba(182,177,169,.6); box-shadow: 0 12px 22px -14px rgba(46,45,41,.55); }
.logo-disc img, .stop-node.n2 .logo-disc img { width: 70%; height: 70%; max-width: none; object-fit: contain; }
.stop-node.n2 .logo-disc + .logo-disc { margin-left: -.85rem; box-shadow: -4px 0 0 0 var(--paper), 0 12px 22px -14px rgba(46,45,41,.55); }
html[data-theme="dark"] .logo-disc { border-color: rgba(244,121,91,.55); }
.stop:hover .stop-node { box-shadow: none; }
.stop.now .logo-disc { border-color: var(--accent); }
.stop.now .stop-node::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .stop.now .logo-disc::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
                                animation: ring 2.6s ease-out infinite; }
}
@media (max-width: 46rem) {
  .stop { grid-template-columns: 6rem 1fr; }
  .stop-node, .journey.legend .stop-node { width: 6rem; justify-content: flex-start; }
  .logo-disc { width: 3.7rem; height: 3.7rem; }
  .stop-node.n2 .logo-disc { width: 3.3rem; height: 3.3rem; }
  .stop-node.n2 .logo-disc + .logo-disc { margin-left: -.75rem; }
}
.stop-node.n2 .logo-disc + .logo-disc { margin-left: -.4rem; }
.logo-disc.wide img, .stop-node.n2 .logo-disc.wide img { width: 62%; }
@media (max-width: 46rem) { .stop-node.n2 .logo-disc + .logo-disc { margin-left: -.4rem; } }
@media (max-width: 46rem) {
  .stop { grid-template-columns: 5.4rem 1fr; column-gap: 1rem; }
  .stop-node, .journey.legend .stop-node { width: 5.4rem; justify-content: center; }
  .logo-disc { width: 3.6rem; height: 3.6rem; }
  .stop-node.n2 .logo-disc { width: 2.9rem; height: 2.9rem; }
}

/* The event display explained for everyone: where it is, the process, and the process in plain words */
.ev-kicker { margin: 0; font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .17em;
             text-transform: uppercase; color: var(--accent); }
.ev-say { margin: -.35rem 0 .1rem; font-family: var(--serif); font-size: .86rem; line-height: 1.35; color: var(--grey);
          opacity: 0; transform: translateY(4px); transition: opacity .6s ease .1s, transform .6s cubic-bezier(.2, .7, .2, 1) .1s; }
.ev-say.on { opacity: 1; transform: none; }
.ev-mini { display: none; }
@media (max-width: 52rem) {
  .hero:not(.page-hero) .hero-stage { position: relative; margin-bottom: 3.9rem; }
  .ev-mini { display: flex; flex-direction: column; align-items: center; gap: .3rem; position: absolute; left: 0; right: 0;
             top: calc(100% + .15rem); text-align: center; pointer-events: none; }
  .ev-mini .ev-label { font-size: 1.2rem; min-height: 1.3em; }
  .ev-mini .ev-say { margin: -.25rem 0 0; font-size: .82rem; }
}
@media print { .ev-mini { display: none; } }
@media (max-width: 52rem) {
  .hero:not(.page-hero) .hero-stage { margin-bottom: 4.3rem; }
  .ev-mini { top: calc(100% + .55rem); }
}
@media (max-width: 52rem) {
  .hero:not(.page-hero) .hero-stage { margin-bottom: calc(3.9rem + var(--ro-out, 0px)); }
  .ev-mini { top: calc(100% + var(--ro-out, 0px) + .3rem); }
}

/* =====================================================================
   Opening reveal, once per visit: two protons, each with its three
   quarks, fly in from the sides and collide at the centre, and the
   collision sends particles out through the layers of a detector, their
   tracks bent by the magnetic field. Then the page opens from the
   collision point.
   ===================================================================== */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
.intro { display: none; --u: max(.5vw, .8333vh); }   /* one unit of the drawing, which is scaled to cover the screen */
.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 100; background: #880b0f; transform: none;
  --hole: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000000 calc(var(--hole) + 1.5px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000000 calc(var(--hole) + 1.5px));
  animation: intro-open .8s cubic-bezier(.65, 0, .25, 1) 1.2s forwards, intro-fade .35s ease 1.75s forwards;
}
html[data-theme="dark"].intro-on .intro { background: #171612; }
.intro svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro path, .intro circle { fill: none; }          /* strokes in drawing units: one unit is about 6 to 9 pixels */
.intro .ly { stroke: rgba(244,121,91, .2); stroke-width: .16; opacity: 0; animation: intro-in .6s ease var(--d) forwards; }
.intro .tr { stroke: rgba(255,255,255, .8); stroke-width: .15; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
             opacity: 0; animation: intro-draw var(--t) cubic-bezier(.2, .6, .3, 1) var(--d) forwards; }
.intro .tr.hard { stroke: #e7e4d6; stroke-width: .21; }
.intro .tr.nu { stroke: rgba(244,121,91, .6); stroke-dasharray: .012 .018; stroke-dashoffset: 0; opacity: 0;
                animation: intro-in .25s ease var(--d) forwards; }
.intro .flash { fill: #ffffff; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center;
                animation: intro-flash .5s ease-out .6s forwards; }
@keyframes intro-draw { from { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }   /* hidden until its turn, so no stray end caps */
@keyframes intro-in { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; } }
@keyframes intro-flash { 0% { opacity: 0; transform: scale(.1); } 18% { opacity: .95; transform: scale(.5); }
                         100% { opacity: 0; transform: scale(1.6); } }
@keyframes intro-open { to { --hole: 150vmax; } }
@keyframes intro-fade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro-on .intro { display: none; } }

/* the two protons: a ball of light with two up quarks (white) and a down quark (coral) inside, turning as the
   protons speed up towards each other from near the edges of the screen, and bursting where they meet */
.intro .pr { --r: calc(4.2 * var(--u)); position: absolute; left: 50%; top: 50%; width: calc(2 * var(--r)); height: calc(2 * var(--r));
             margin: calc(-1 * var(--r)) 0 0 calc(-1 * var(--r)); opacity: 0;
             filter: drop-shadow(0 0 calc(.6 * var(--u)) rgba(255,255,255, .3));
             animation: pr-fly-l .55s cubic-bezier(.55, 0, .9, .4) .05s both, intro-in .2s ease both; }
.intro .pr.r { animation-name: pr-fly-r, intro-in; }
.intro .pr-body { fill: rgba(255,255,255, .13); stroke: rgba(255,255,255, .85); stroke-width: .45;
                  animation: pr-burst .3s ease-out .6s forwards; }
.intro .q { fill: #ffffff; }
.intro .q.d { fill: #f4795b; }
.intro .qs { animation: q-turn .6s linear both, intro-out .12s ease .6s forwards; }
.intro .pr.r .qs { animation-name: q-turn-r, intro-out; }
/* the two flights, written out in full since older Safari does not read variables in keyframes: a proton's
   half-width (--r) is 4.2 drawing units and its edge is at .9 of that, so each sets off 10.08 units in from its
   side of the screen and stops 3.78 units from the centre, edge to edge with the other */
@keyframes pr-fly-l { from { transform: translateX(calc(-50vw + 10.08 * max(.5vw, .8333vh))); }
                      to { transform: translateX(calc(-3.78 * max(.5vw, .8333vh))); } }
@keyframes pr-fly-r { from { transform: translateX(calc(50vw - 10.08 * max(.5vw, .8333vh))); }
                      to { transform: translateX(calc(3.78 * max(.5vw, .8333vh))); } }
@keyframes pr-burst { to { transform: scale(1.7); opacity: 0; stroke-width: .15; } }
@keyframes q-turn { to { transform: rotate(120deg); } }
@keyframes q-turn-r { to { transform: rotate(-120deg); } }

/* the copy button of each block of commands, in the corner of the block */
.pkg-codebox { position: relative; }
.pkg-codebox .pkg-code { padding-right: 3.1rem; }
.pkg-codebox .code-copy { position: absolute; top: .4rem; right: .4rem; width: 2rem; height: 2rem; background: var(--paper); }
html[data-theme="dark"] .pkg-codebox .code-copy { background: var(--card); }

/* Publications: when a filter or a search brings papers back, they glide into place one after another */
@keyframes pub-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pub.pub-in { animation: pub-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .pub.pub-in { animation: none; } }

/* Software page: pointing at a package's name brings its drawing to life, as on the research cards.
   The conic hull fills with lattice points, HyperPrecision's sight narrows onto its target, and the
   three couplings of SLQ-RG run with the scale, changing pace at the leptoquark mass. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pkg-head:hover .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
  .pkg-head:hover .ix circle[style*="--k"] {
    transform-box: fill-box; transform-origin: center; animation: th-lit .8s ease both; animation-delay: calc(var(--k) * 90ms + .35s); }
  .pkg-head:hover .ix path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
  .pkg-head:hover .ix path.focus { transform-box: view-box; transform-origin: 24px 15px; animation: ix-focus 1.6s ease-in-out .3s infinite; }
}

/* The page not found names the event on its detector, as the home page does */
.ev-note { margin: 1.25rem 0 0; padding: .1rem 0 .15rem .85rem; border-left: 1px solid rgba(182,177,169, .55); }
.ev-note .ev-label { margin: .3rem 0 0; min-height: 1.35em; font-size: 1.15rem; }
.ev-note .ev-say { margin: .1rem 0 0; font-size: .84rem; }
@media print { .ev-note { display: none; } }
@media (max-width: 52rem) {        /* on tablets and phones the rings reach above the stage, so it keeps clear of the note */
  .page-404 .page-hero .hero-stage { margin-top: calc(.9rem + var(--ro-out, 0px)); }
}

/* About on phones: the portrait sits centred above the statement rather than hugging the left edge */
@media (max-width: 44rem) { .about-grid .portrait-frame { margin-left: auto; margin-right: auto; } }

/* CV, computing: on hover each drawing does what its tools do. Particles fly out of the collision of an event
   generator, a histogram fills bin by bin, a spectrum appears level by level from the lightest state, a boson
   is exchanged between two vertices, and the loop momentum runs around the loop. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tool:hover .ix path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
  .tool:hover .ix path.bar, .tool:hover .ix path.lvl {
    animation: redraw .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 85ms); }
  .tool:hover .ix circle[style*="--k"] { transform-box: fill-box; transform-origin: center; animation: th-lit .8s ease both; }
}

/* Lines that flow on hover take no transition except while they are first drawn. A transition on their dash
   offset held the flow still for the first 1.6 s of every hover, and on leaving it made the start of the line
   go missing for a moment. Now the flow starts at once and the line is whole again at once. */
.ix path.flow { transition: none; }
.js .reveal.in .ix path.flow { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1) .25s; }

/* Home page, Explore: on hover each drawing does what its page shows. The vertices of the polytope light up in
   turn, the papers along the running total, a talk flies along its arc to the city it lands in, the medal
   wobbles, the releases appear in time order, the students branch out from their supervisor, the career steps
   follow one another, and the globe turns. The chalk of Teaching writes again, as before. */
.ex-icon path.flow { transition: none; }
.js .reveal.in .ex-icon path.flow { transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ex-card:hover .ex-icon circle[style*="--k"] {
    transform-box: fill-box; transform-origin: center; animation: th-lit .8s ease both; animation-delay: calc(var(--k) * 90ms + .3s); }
  .ex-card:hover .ex-icon path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
  .ex-card:hover .ex-icon path.step { animation: redraw .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 130ms); }
  .ex-card:hover .ex-icon .wobble { transform-box: view-box; transform-origin: 24px 13px; animation: ex-wobble 1.2s ease-out; }
  .ex-card:hover .ex-icon circle.turn { animation: ex-turn 2s ease-in-out infinite; }
}
@keyframes ex-wobble { 0% { transform: rotate(0); } 22% { transform: rotate(-10deg); } 48% { transform: rotate(7deg); }
                       72% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes ex-turn { 0% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(9px); opacity: 1; }
                     84% { transform: translateX(11px); opacity: 0; } 86% { transform: translateX(-3px); opacity: 0; }
                     100% { transform: translateX(0); opacity: 1; } }

/* Phones: the menu that scrolls sideways fades out softly at the edge that has more items beyond it,
   in place of cutting a word in half */
@media (max-width: 51rem) {
  .navbar nav { --fl: 0px; --fr: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 var(--fl), #000000 calc(100% - var(--fr)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000000 var(--fl), #000000 calc(100% - var(--fr)), transparent 100%); }
  .navbar nav.fade-l { --fl: 1.8rem; }
  .navbar nav.fade-r { --fr: 1.8rem; }
}

/* The same small motions for keyboard users, when a card that is a link takes the focus */
@media (prefers-reduced-motion: no-preference) {
  .ex-card:focus-visible .ex-icon path, .pick:focus-visible .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
  .ex-card:focus-visible .ex-icon circle[style*="--k"], .pick:focus-visible .ix circle[style*="--k"] {
    transform-box: fill-box; transform-origin: center; animation: th-lit .8s ease both; animation-delay: calc(var(--k) * 90ms + .3s); }
  .ex-card:focus-visible .ex-icon path.flow, .pick:focus-visible .ix path.flow {
    stroke-dasharray: var(--da) var(--dg); stroke-dashoffset: calc(-1 * var(--run) * var(--dp)); animation: ix-flow .8s linear infinite; }
  .ex-card:focus-visible .ex-icon path.step { animation: redraw .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 130ms); }
  .ex-card:focus-visible .ex-icon .wobble { transform-box: view-box; transform-origin: 24px 13px; animation: ex-wobble 1.2s ease-out; }
  .ex-card:focus-visible .ex-icon circle.turn { animation: ex-turn 2s ease-in-out infinite; }
}

/* Home page, recent news: the Fog spine of the timeline draws itself down from the newest item as the list
   comes into view, while the items arrive one after another */
.news { position: relative; border-left-color: transparent; }
.news::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--gold);
                transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js .news:not(.drawn)::before { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .news::before { transition: none; } .js .news:not(.drawn)::before { transform: none; } }
@media print { .news::before { transform: none; } }

/* FeynGKZ (Research and Software): on hover its Newton polytope is triangulated, one spoke after another */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover .ix path.step, .pkg-head:hover .ix path.step {
    animation: redraw .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 110ms + .2s); }
}

/* Software page: each package and the library fold up to their name, a line about them and their badges.
   A click (or Enter) opens the rest: the links, the releases, what they need, the files and how to get them. */
details.pkg-more > summary { display: block; list-style: none; cursor: pointer; border-radius: 4px; }
details.pkg-more > summary::-webkit-details-marker { display: none; }
details.pkg-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }
.pkg-head { display: flex; }
.pkg-title, .pkg-badges { display: flex; }
.pkg-title { flex-direction: column; }
.pkg-tagline, .pkg-what { display: block; }
.pkg-what { margin: .9rem 0 0; }
.pkg-toggle { display: inline-flex; align-items: center; gap: .45rem; margin-top: .85rem; padding-bottom: .15rem;
              border-bottom: 1px solid rgba(182,177,169, .45); font-family: var(--sans); font-size: .62rem; font-weight: 600;
              letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .2s, border-color .2s; }
.pkg-toggle .chev { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
                    stroke-linejoin: round; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.pkg-toggle .t-hide, details.pkg-more[open] .pkg-toggle .t-show { display: none; }
details.pkg-more[open] .pkg-toggle .t-hide { display: inline; }
details.pkg-more[open] .pkg-toggle .chev { transform: rotate(180deg); }
details.pkg-more > summary:hover .pkg-toggle { color: var(--head); border-color: var(--gold); }
.pkg { transition: box-shadow .25s, border-color .25s; }
.pkg:has(details.pkg-more:not([open]) > summary:hover) { box-shadow: var(--lift); }
.pkg-body { padding-top: 1.1rem; }
.pkg-body > .pkg-actions:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  details.pkg-more[open] > .pkg-body { animation: unfold .5s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (interpolate-size: allow-keywords) {
    details.pkg-more { interpolate-size: allow-keywords; }
    details.pkg-more::details-content { block-size: 0; overflow: clip;
      transition: block-size .55s cubic-bezier(.2, .7, .2, 1), content-visibility .55s allow-discrete; }
    details.pkg-more[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) { .pkg-toggle .chev { transition: none; } }

/* The menu bar at the top of every page, a little wider than the page header below it: the name on the left, and
   the ten pages in ordinary capitals (as in the menus of Stanford and SLAC), spread evenly up to the two buttons.
   The pages grow to 1rem as the window widens to the full width of the bar. */
.navbar .nav-inner { max-width: 76rem; }
.navbar nav { font-size: .94rem; letter-spacing: .01em; text-transform: none; padding: .62rem 0; }
.navbar nav .nav-item > a { line-height: 1.6rem; }   /* the same height at every size of the type: 3.8rem with its rule */
.brand { font-size: 1.5rem; }
@media (min-width: 51.01rem) {
  .nav-inner nav { justify-content: space-between; }
  .navbar nav .nav-item:first-child > a { margin-left: -.36rem; }
}
@media (min-width: 66.01rem) { .navbar nav { font-size: clamp(.94rem, calc(.94rem + (100vw - 66rem) * .006), 1rem); } }
@media (min-width: 51.01rem) and (max-width: 66rem) { .brand { display: none; } }   /* the ten pages need the room */
@media (min-width: 51.01rem) and (max-width: 56rem) { .navbar nav { font-size: .8rem; } }

/* Publications: a click on a paper (its title, authors or journal) opens its abstract, its length, its preprint
   numbers and its arXiv category, as for the packages on the Software page */
details.pub-open > summary { display: block; list-style: none; cursor: pointer; border-radius: 3px; }
details.pub-open > summary::-webkit-details-marker { display: none; }
details.pub-open > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pub .title, .pub .meta, .pub .detail { display: block; }
.pub-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-family: var(--sans); font-size: .6rem;
              font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: .8;
              transition: opacity .2s, color .2s; }
.pub-toggle .chev { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
                    stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.pub-toggle .t-hide, details.pub-open[open] .pub-toggle .t-show { display: none; }
details.pub-open[open] .pub-toggle .t-hide { display: inline; }
details.pub-open[open] .pub-toggle .chev { transform: rotate(180deg); }
details.pub-open > summary:hover .pub-toggle, details.pub-open[open] .pub-toggle { opacity: 1; }
.pub-abs { margin: .75rem 0 .35rem; padding: .85rem 1.05rem .85rem; max-width: 46rem; border-left: 2px solid rgba(182,177,169, .6);
           border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pub-abs .abstract { margin: 0; font-size: .95rem; line-height: 1.62; overflow-wrap: break-word; }
.pub-abs .k { display: block; margin-bottom: .3rem; font-family: var(--sans); font-size: .58rem; font-weight: 600;
              letter-spacing: .15em; text-transform: uppercase; color: var(--grey); }
.pub-facts { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; margin-top: .85rem; font-size: .88rem; }
.pub-facts .k { margin-bottom: .05rem; }
@media (prefers-reduced-motion: no-preference) {
  details.pub-open[open] > .pub-abs { animation: unfold .45s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (interpolate-size: allow-keywords) {
    details.pub-open { interpolate-size: allow-keywords; }
    details.pub-open::details-content { block-size: 0; overflow: clip;
      transition: block-size .45s cubic-bezier(.2, .7, .2, 1), content-visibility .45s allow-discrete; }
    details.pub-open[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) { .pub-toggle .chev { transition: none; } }
@media (max-width: 34rem) {                 /* phones: a little more room for the abstract */
  .pub-abs { padding: .7rem .8rem .75rem; }
  .pub-abs .abstract { font-size: .9rem; line-height: 1.58; }
  .pub-facts { gap: .45rem 1.4rem; }
}

/* =====================================================================
   Menu dropdowns: pointing at a page in the menu (or tabbing to it) shows the parts of that page, with a
   line about some of them, as on many large sites. On touch screens (iPad and phone) a tap opens the panel,
   with the page itself first, and a second tap on the item goes to the page.
   ===================================================================== */
.nav-item { position: relative; display: flex; }
.navbar nav .nav-item > a { margin-left: 0; margin-right: 0; }
.navbar nav .nav-item:last-child > a { margin-right: -.36rem; }
[id] { scroll-margin-top: 4.8rem; }        /* clear of the menu bar when a link jumps to a part of a page */
.nav-drop { display: none; z-index: 40; min-width: 18rem; width: max-content; max-width: min(25rem, calc(100vw - 16px)); padding: .45rem 0 .5rem; background: #981819;
            border: 1px solid rgba(218,215,203, .28); border-top: 2px solid var(--gold); border-radius: 0 0 6px 6px;
            box-shadow: 0 18px 36px -18px rgba(0,0,0, .55); }
.navbar nav .nav-drop a { display: block; margin: 0; padding: .48rem 1.05rem; border: 0; white-space: normal;
                          font-size: .8rem; letter-spacing: .02em; text-transform: none; color: rgba(255,255,255, .9); }
.navbar nav .nav-drop a::after { content: none; }
.navbar nav .nav-drop a:hover, .navbar nav .nav-drop a:focus-visible { background: rgba(218,215,203, .1); color: #fefdf8; }
.nav-drop .nd-t { display: block; font-family: var(--sans); font-weight: 500; }
.nav-drop .nd-n { display: block; margin-top: .1rem; font-family: var(--display); font-style: italic; font-size: .95rem;
                  letter-spacing: 0; color: rgba(218,215,203, .85); }
.navbar nav .nav-drop a:hover .nd-t { color: #dad7cb; }
.nav-item > a[aria-current="page"] + .nav-drop { border-top-color: #dad7cb; }
.navbar nav .nav-drop a.nd-page { display: none; margin-bottom: .3rem; padding-top: .6rem; padding-bottom: .65rem;
                                  border-bottom: 1px solid rgba(218,215,203, .2); font-size: .64rem; font-weight: 600;
                                  letter-spacing: .14em; text-transform: uppercase; color: #dad7cb; }
@media (min-width: 51.01rem) and (hover: hover) {
  .nav-drop { display: block; position: absolute; top: 100%; left: -.4rem; opacity: 0; visibility: hidden; transform: translateY(6px);
              transition: opacity .18s ease .08s, transform .18s ease .08s, visibility 0s .26s; }
  .nav-item:nth-last-child(-n+3) .nav-drop { left: auto; right: -.4rem; }
  .nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop {
    opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
}
@media (hover: none) {                       /* iPad and other touch screens: the panel opens on a tap */
  .navbar nav .nav-drop a.nd-page { display: block; }
  .nav-item.open > .nav-drop { display: block; position: fixed; max-width: calc(100vw - 16px); animation: nd-in .2s ease both; }
  .navbar nav .nav-item.open > a { color: #dad7cb; }
}
@keyframes nd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-drop { transition: none !important; transform: none !important; animation: none !important; } }
@media print { .nav-drop { display: none !important; } }

/* Publications: each paper's BibTeX, copied with one click (or read on INSPIRE) */
.pub-cite { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .85rem; }
.pub-cite .k { margin: 0 .2rem 0 0; }
.cite-copy { display: inline-flex; align-items: center; gap: .45rem; padding: .34rem .75rem .32rem; border: 1px solid var(--gold);
             border-radius: 2px; background: transparent; cursor: pointer; font-family: var(--sans); font-size: .6rem; font-weight: 600;
             letter-spacing: .12em; text-transform: uppercase; color: var(--accent); transition: background .2s, color .2s, border-color .2s; }
.cite-copy svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cite-copy:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cite-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cite-copy.done { border-color: #b1040e; color: #b1040e; background: rgba(177,4,14, .08); }
html[data-theme="dark"] .cite-copy.done { border-color: #82c0b0; color: #82c0b0; }
.cite-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--grey); }
.navbar nav.has-open { -webkit-mask-image: none; mask-image: none; }   /* an open panel is not faded with the menu's edges */

/* The scroll cue of the home page fades away once the reader has started to scroll, so that it never sits on the text */
.scroll-cue { transition: opacity .45s ease, visibility 0s 0s; }
.scroll-cue.gone { opacity: 0 !important; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }

/* ------------------------------------------- links between the pages */

/* Research page: each package and the library in a few words, a link to its card on the Software page */
.cards.soft-index { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 46rem) { .cards.soft-index { grid-template-columns: 1fr; } }
a.soft-link { flex-direction: row; align-items: stretch; gap: 1.1rem; color: var(--ink); text-decoration: none; }
a.soft-link .ix { flex: none; align-self: flex-start; margin: .3rem 0 0; width: 2.9rem; height: 1.85rem; }
.soft-link .sl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soft-link h4 { font-size: 1.3rem; margin-bottom: .15rem; }
.soft-link p { margin: 0 0 .65rem; font-size: .93rem; color: var(--grey); }
.soft-link .sl-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.soft-link .sl-meta .tag { margin-left: 0; }
.soft-link .sl-go { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.soft-link .sl-go span { display: inline-block; transition: transform .2s; }
.soft-link:hover .sl-go span, .soft-link:focus-visible .sl-go span { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .soft-link:focus-visible .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
}

/* home: each news item is a link to where the site says more about it, and so is each number */
.news-link { color: inherit; text-decoration: none; }
.news-link::after { content: ""; position: absolute; inset: 0; border-radius: 0 6px 6px 0; }
.news-link .nl-go { position: relative; left: -4px; color: var(--accent); opacity: 0; transition: left .2s, opacity .2s; }   /* inline, held to the last word */
.news li:hover .nl-go, .news-link:focus-visible .nl-go { opacity: 1; left: 0; }
.news-link:focus-visible { outline: none; }
.news-link:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: none) { .news-link .nl-go { opacity: .75; left: 0; } }
a.stat { color: inherit; text-decoration: none; }
a.stat .l { transition: color .2s; }
a.stat:hover .l, a.stat:focus-visible .l { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  a.stat:focus-visible .ix path { animation: redraw 1.1s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) { .soft-link .sl-go span, .news-link .nl-go { transition: none; } }
/* where a link from another page lands: a ring that glows once and fades, so the eye finds it */
@media (prefers-reduced-motion: no-preference) {
  .pub:target, .pkg:target, .fund:target, .talk-card:target, #talks .entry:target, .course:target, .student:target, .blk:target {
    animation: landed 2.4s cubic-bezier(.3, .6, .3, 1) .55s;
  }
}
@keyframes landed {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
  16% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 60%, transparent), 0 14px 30px -18px rgba(46,45,41, .45); }
}

/* ------------------------------------------- search the whole site (press / on any page) */

.ss-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
          margin-left: .7rem; padding: 0; border-radius: 50%; border: 1px solid rgba(218,215,203, .4);
          background: transparent; color: #dad7cb; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.ss-btn:hover { border-color: #dad7cb; background: rgba(218,215,203, .1); }
.ss-btn:active { transform: scale(.92); }
.ss-btn:focus-visible { outline: 2px solid #dad7cb; outline-offset: 2px; }
.ss-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; overflow: visible; }
.nav-tools { flex: none; display: flex; align-items: center; gap: .45rem; }
.nav-tools .ss-btn, .nav-tools .theme-toggle { margin-left: 0; }
@media (min-width: 51.01rem) and (max-width: 62rem) { .nav-inner { gap: 1.1rem; } .nav-tools { gap: .35rem; } }
@media (min-width: 51.01rem) and (max-width: 54rem) { .navbar nav .nav-item > a { padding-left: .3rem; padding-right: .3rem; } }

dialog.ss { width: min(42rem, calc(100vw - 1.5rem)); max-width: none;
            max-height: calc(100vh - max(.75rem, 8vh) - .75rem); max-height: calc(100dvh - max(.75rem, 8vh) - .75rem);
            margin: max(.75rem, 8vh) auto auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink);
            overflow: visible; }
dialog.ss::backdrop { background: rgba(25,25,21, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ss-box { display: flex; flex-direction: column; max-height: inherit; overflow: hidden; border-radius: 6px;
          background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--gold);
          box-shadow: 0 34px 70px -30px rgba(18,17,13, .7), 0 0 0 1px rgba(46,45,41, .06); }
.ss-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem .85rem 1.15rem; border-bottom: 1px solid var(--hair); }
.ss-ico { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; }
.ss-input { flex: 1; min-width: 0; border: 0; padding: .2rem 0; background: transparent; color: var(--ink);
            font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; outline: none; }
.ss-input::placeholder { color: var(--grey); opacity: .75; }
.ss-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ss-close { flex: none; font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
            color: var(--grey); background: transparent; border: 1px solid var(--hair); border-radius: 3px; padding: .25rem .45rem; cursor: pointer; }
.ss-close:hover { color: var(--ink); border-color: var(--rule); }
.ss-hints { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .9rem 1.15rem; }
.ss-hints[hidden] { display: none; }
.ss-try { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-right: .2rem; }
.ss-hints button { font-family: var(--sans); font-size: .75rem; color: var(--accent); background: transparent; cursor: pointer;
                   border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem; transition: background .2s, border-color .2s; }
.ss-hints button:hover, .ss-hints button:focus-visible { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
.ss-list { list-style: none; margin: 0; padding: .35rem; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.ss-list:empty { padding: 0; }
.ss-list a { display: grid; gap: .12rem; padding: .55rem .85rem .6rem; border-radius: 4px; border-left: 2px solid transparent;
             color: inherit; text-decoration: none; }
.ss-list li[aria-selected="true"] a { background: var(--lift-bg, #ffffff); box-shadow: 0 0 0 1px var(--hair), 0 10px 22px -16px rgba(46,45,41, .5);
                                      border-left-color: var(--gold); }
.ss-k { font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ss-t { font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; color: var(--head); }
.ss-s { font-size: .8rem; line-height: 1.45; color: var(--grey); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.15rem;
           border-top: 1px solid var(--hair); font-family: var(--sans); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.ss-keys { display: flex; gap: .9rem; }
.ss-foot kbd { font-family: var(--sans); font-size: .62rem; padding: .05rem .3rem; margin-right: .2rem; border: 1px solid var(--hair);
               border-bottom-width: 2px; border-radius: 3px; background: var(--panel); color: var(--ink); }
@media (hover: none), (max-width: 36rem) { .ss-keys { display: none; } }
html[data-theme="dark"] .ss-list li[aria-selected="true"] a { background: var(--card); }
@media (prefers-reduced-motion: no-preference) {
  dialog.ss[open] .ss-box { animation: ss-drop .28s cubic-bezier(.2, .7, .2, 1); }
  dialog.ss[open]::backdrop { animation: ss-fade .28s ease; }
  .ss-list li { animation: ss-rise .3s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--k, 0), 8) * 22ms); }
  @keyframes ss-drop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ss-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
@media print { .ss-btn, dialog.ss { display: none !important; } }

/* Research domains: the whole card opens its papers (or the Software page), the package names their cards */
.theme .th-go { margin-top: .75rem; align-self: flex-start; font-family: var(--sans); font-size: .66rem; font-weight: 600;
                letter-spacing: .12em; text-transform: uppercase; color: var(--c); text-decoration: none; }
.theme .th-go::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* the card is the link */
.theme .th-go span { display: inline-block; transition: transform .2s; }
.theme:hover .th-go span, .theme .th-go:focus-visible span { transform: translateX(3px); }
.theme .th-go:focus-visible { outline: none; }
.theme:has(.th-go:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }
.theme p a { position: relative; z-index: 2; }                  /* above the card's own link */
.theme { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .theme .th-go span { transition: none; } }

/* Publications: the domain chosen on the Research page, with a cross to show every paper again */
.dom-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .3rem .22rem .75rem; border-radius: 999px;
            background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
            font-family: var(--sans); font-size: .72rem; color: var(--ink); }
.dom-chip[hidden] { display: none; }
.dom-chip .dc-l { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dom-chip .dc-n { font-weight: 600; }
.dom-chip .dc-x { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer; line-height: 1;
                  background: transparent; color: var(--grey); font-size: .95rem; }
.dom-chip .dc-x:hover, .dom-chip .dc-x:focus-visible { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .dom-chip:not([hidden]) { animation: ss-rise .35s cubic-bezier(.2, .7, .2, 1) .2s both; }
}

/* Publications: the papers closest to an opened one (by their words, domains and co-authors), one click away */
.pub-rel { margin-top: .85rem; }
.pub-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.pub-rel li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.45; }
.pub-rel li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .42rem; height: 1px; background: var(--gold); }
.pub-rel a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .18em; }
.pub-rel a:hover { color: var(--accent); text-decoration-color: currentColor; }
.pub-rel .muted { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; }
@media (max-width: 40rem) { .pub-rel li { font-size: .86rem; } }
/* Publications: how many papers the list holds as it is filtered, and their BibTeX in one click */
.pub-tools { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: .9rem 0 .3rem; }
.pub-count { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.bib-all[hidden] { display: none; }
/* Publications: newest first, or most cited first (as INSPIRE counts), within each group */
.pub-tools { justify-content: flex-start; }
.pub-sort { display: inline-flex; gap: 2px; padding: 2px; margin-right: auto; border: 1px solid var(--rule); border-radius: 999px; }
.pub-sort button { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
                   line-height: 1; color: var(--grey); background: transparent; border: 0; border-radius: 999px; padding: .45rem .8rem;
                   cursor: pointer; transition: background .2s, color .2s; }
.pub-sort button:hover { color: var(--ink); }
.pub-sort button[aria-pressed="true"] { background: #8c1515; color: #fefdf8; }
.pub-sort button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-theme="dark"] .pub-sort button[aria-pressed="true"] { background: var(--gold); color: #171612; }
.pub-facts .muted { font-size: .8em; }
/* Software: how to cite a package, the papers of its releases with their BibTeX in one click */
.pkg-cite .cite-copy { margin-top: .55rem; }
.pkg-cite li a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .18em; }
.pkg-cite li a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Talks: the talks of a city chosen on the map */
.talk-chip { margin: 0 0 1rem; scroll-margin-top: 5.2rem; }
.talk-chip .tf-n { color: var(--grey); }
#talks .tf-out { display: none !important; }
/* the hints under the page animations: a little tighter where the animation is narrowest (small laptop windows) */
@media (min-width: 51.01rem) and (max-width: 54rem) { .scene-hint { letter-spacing: .11em; } .scene-hint::before { width: 1.1rem; } }
/* Software and Funding, on phones: the line about each package or award may take two lines (room kept for both,
   so nothing jumps). On a 390 px phone the awards that were declined lost the word "declined" to the ellipsis. */
@media (max-width: 40rem) {
  [data-scene="toolchain"] .scene-hint, [data-scene="medals"] .scene-hint { white-space: normal; text-wrap: balance;
                                                                          min-height: 2.9em; line-height: 1.45; }
}

/* Publications: the frequent co-authors, a click shows the papers written with them */
.coauthors { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: .85rem 0 0; }
.coauthors .ca-l { font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
                   color: var(--grey); margin-right: .3rem; }
.coauthors button { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--serif); font-size: .82rem; color: var(--ink);
                    background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: .18rem .35rem .18rem .7rem;
                    cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.coauthors button:hover { border-color: var(--gold); }
.coauthors .ca-n { font-family: var(--sans); font-size: .6rem; font-weight: 600; min-width: 1.25rem; padding: .12rem .3rem; border-radius: 999px;
                   background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent); text-align: center; }
.coauthors button[aria-pressed="true"] { background: #8c1515; border-color: #8c1515; color: #fefdf8; }
.coauthors button[aria-pressed="true"] .ca-n { background: rgba(218,215,203, .25); color: #fefdf8; }
.coauthors button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-theme="dark"] .coauthors button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #171612; }
html[data-theme="dark"] .coauthors button[aria-pressed="true"] .ca-n { background: rgba(23,22,18, .2); color: #171612; }

/* Home, academic journey: each stop opens its entry in the CV */
.stop-go::before { content: ""; position: absolute; inset: -.4rem -.3rem; z-index: 1; border-radius: 6px; }
.stop-go:focus-visible { outline: none; }
.stop:has(.stop-go:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.stop:has(.stop-go):hover .stop-city { color: var(--accent); }
.stop-city { transition: color .2s; }
@media (max-width: 40rem) {                 /* on phones the co-authors keep to one line that scrolls sideways */
  .coauthors { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem;
               -webkit-mask-image: linear-gradient(90deg, #000000 88%, transparent); mask-image: linear-gradient(90deg, #000000 88%, transparent); }
  .coauthors::-webkit-scrollbar { display: none; }
  .coauthors button, .coauthors .ca-l { flex: none; white-space: nowrap; }
}
/* CV, Computing: each tool links to its home page */
.tool li a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; transition: color .2s; }
.tool li a:hover { color: var(--accent); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {   /* the related papers come in one after another as a paper opens */
  details.pub-open[open] .pub-rel li { animation: rel-in .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k, 0) * 80ms); }
  details.pub-open[open] .pub-rel li::before { animation: rel-dash .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--k, 0) * 80ms);
                                               transform-origin: left center; }
  @keyframes rel-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  @keyframes rel-dash { from { transform: scaleX(0); } to { transform: none; } }
}
.pkg-also li a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .18em; }
.pkg-also li a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Contact: the contact card for an address book */
.reach-vcf { margin: .7rem 0 0; font-size: .9rem; }
.reach-vcf .muted { font-size: .85em; }
/* Teaching: a course asks the chalkboard at the top for one of its equations */
.on-board { margin-top: .8rem; align-self: flex-start; position: relative; z-index: 1; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--accent); background: transparent; border: 0; border-bottom: 1px solid var(--rule);
                    padding: 0 0 .1rem; cursor: pointer; }
.on-board:hover, .on-board:focus-visible { border-bottom-color: currentColor; }
.on-board span { display: inline-block; transition: transform .2s; }
.on-board:hover span { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .on-board span { transition: none; } }
/* Publications: copy a link to one paper */
.links .perma { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
                color: var(--accent); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .05rem; cursor: pointer; }
.links .perma:hover, .links .perma:focus-visible { border-bottom-color: var(--accent); }
.links .perma.done { color: #b1040e; border-bottom-color: #b1040e; }
html[data-theme="dark"] .links .perma.done { color: #82c0b0; border-bottom-color: #82c0b0; }
/* "?": the keyboard shortcuts, in the search box's style */
dialog.keys-help { width: min(30rem, calc(100vw - 1.5rem)); }
.kh-title { flex: 1; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--head); }
.kh-list { margin: 0; padding: .8rem 1.15rem 1rem; display: grid; gap: .6rem; }
.kh-list > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; align-items: baseline; }
.kh-list dt { font-family: var(--sans); font-size: .7rem; color: var(--grey); }
.kh-list dd { margin: 0; font-size: .92rem; color: var(--ink); }
.kh-list kbd { font-family: var(--sans); font-size: .68rem; padding: .08rem .38rem; border: 1px solid var(--hair); border-bottom-width: 2px;
               border-radius: 3px; background: var(--panel); color: var(--ink); }
@media (max-width: 30rem) { .kh-list > div { grid-template-columns: 1fr; gap: .2rem; } }
.bib-file { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
            background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .05rem; cursor: pointer; }
.bib-file:hover, .bib-file:focus-visible { border-bottom-color: var(--accent); }
.bib-file[hidden] { display: none; }
/* on touch screens the small text buttons get a larger area to tap, without moving anything */
@media (pointer: coarse) {
  .on-board, .links .perma, .bib-file, .dom-chip .dc-x { position: relative; }
  .on-board::after, .links .perma::after, .bib-file::after { content: ""; position: absolute; inset: -9px -6px; }
  .links a:not(.button), a.cites { position: relative; }   /* the DOI, code and arXiv links, and the number of citations */
  .links a:not(.button)::after { content: ""; position: absolute; inset: -9px -6px; }
  a.cites::after { content: ""; position: absolute; inset: -10px -14px; }
  .dom-chip .dc-x::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* the cross that clears a domain or a city */
}

/* Funding: the research proposal behind each postdoctoral fellowship, folded under its card */
.funds { align-items: start; }                     /* an opened card grows alone */
details.fund-more { margin-top: .85rem; }
details.fund-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
                              font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
                              color: var(--accent); }
details.fund-more > summary::-webkit-details-marker { display: none; }
details.fund-more > summary .chev { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
details.fund-more[open] > summary .chev { transform: rotate(180deg); }
details.fund-more > summary .t-hide, details.fund-more[open] > summary .t-show { display: none; }
details.fund-more[open] > summary .t-hide { display: inline; }
details.fund-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fund-abs { margin: .7rem 0 .2rem; padding: .8rem .95rem; border-left: 2px solid rgba(182,177,169, .6);
            background: color-mix(in srgb, var(--gold) 7%, transparent); border-radius: 0 4px 4px 0; }
.fund-abs .k { display: block; margin-bottom: .25rem; font-family: var(--sans); font-size: .56rem; font-weight: 600; letter-spacing: .14em;
               text-transform: uppercase; color: var(--grey); }
.fund-abs .fund-ptitle { margin: 0 0 .75rem; font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--head); }
.fund-abs p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.6; }
.fund-wps { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
.fund-wps li { margin-bottom: .45rem; }
.fund-wps .wp-n { font-style: italic; color: var(--head); }
@media (prefers-reduced-motion: no-preference) {
  details.fund-more[open] > .fund-abs { animation: unfold .45s cubic-bezier(.2, .7, .2, 1) both; }
}
.funds .fund:has(details.fund-more[open]) { grid-column: 1 / -1; }   /* an opened card takes the whole row, to read in comfort */
.fund-abs { max-width: 52rem; }
/* search: a word with a typo is read as the nearest word of the site, and says so */
.ss-fix { margin: 0; padding: .55rem 1.15rem 0; font-size: .82rem; color: var(--grey); }
.ss-fix[hidden] { display: none; }
.ss-fix .ss-fixed { color: var(--ink); font-style: italic; }
.ss-fix .ss-orig { font: inherit; color: var(--accent); background: transparent; border: 0; padding: 0; cursor: pointer;
                   text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .18em; }
.ss-fix .ss-orig:hover { text-decoration-color: currentColor; }
.fund-abs .pub-rel { margin-top: .9rem; }
@media (prefers-reduced-motion: no-preference) {
  details.fund-more[open] .pub-rel li { animation: rel-in .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k, 0) * 80ms); }
}
/* Publications: open or fold every abstract of the list at once */
.pub-openall { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
               background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .05rem; cursor: pointer; }
.pub-openall:hover, .pub-openall:focus-visible { border-bottom-color: var(--accent); }
@media (pointer: coarse) { .pub-openall { position: relative; } .pub-openall::after { content: ""; position: absolute; inset: -9px -6px; } }
/* Talks: the invited talks only, with the city chosen on the map if there is one */
.talk-tools { margin: 0 0 .9rem; }
.talk-inv { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .12em;
            text-transform: uppercase; color: var(--accent); background: transparent; border: 1px solid var(--rule); border-radius: 999px;
            padding: .3rem .4rem .3rem .8rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.talk-inv .ca-n { font-family: var(--sans); font-size: .6rem; font-weight: 600; min-width: 1.25rem; padding: .12rem .3rem; border-radius: 999px;
                  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent); text-align: center; letter-spacing: 0; }
.talk-inv:hover { border-color: var(--gold); }
.talk-inv[aria-pressed="true"] { background: #8c1515; border-color: #8c1515; color: #fefdf8; }
.talk-inv[aria-pressed="true"] .ca-n { background: rgba(218,215,203, .25); color: #fefdf8; }
html[data-theme="dark"] .talk-inv[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #171612; }
html[data-theme="dark"] .talk-inv[aria-pressed="true"] .ca-n { background: rgba(23,22,18, .2); color: #171612; }
.talk-inv:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Research: one Mellin-Barnes integral and its two series, with the number of terms on a slider */
.cont { margin: .8rem 0 0; }
.cont-lede { max-width: var(--prose); margin: 0 0 .7rem; }
.cont-eq { font-size: 1.08rem; color: var(--head); margin: 0 0 1rem; }
.cont-eq > span { white-space: nowrap; }   /* on a phone the line breaks before the equals sign */
.cont .fr { white-space: nowrap; }
.cont-box { position: relative; height: clamp(15rem, 30vw, 21rem); border-radius: 8px; border: 1px solid var(--hair); overflow: hidden;
            background: radial-gradient(60rem 22rem at 50% 0%, rgba(182,177,169,.08), transparent 70%), #ffffff; }
html[data-theme="dark"] .cont-box { background: radial-gradient(60rem 22rem at 50% 0%, rgba(244,121,91,.07), transparent 70%), #1c1b17; }
html:not(.js) .cont-box, html:not(.js) .cont-ctl, html:not(.js) .cont-read { display: none; }
.cont-plot { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.cont-read { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin: .5rem 0 0; min-height: 1.3em; font-family: var(--sans); font-size: .7rem;
             font-variant-numeric: tabular-nums; color: var(--grey); }
.cont-read i { font-family: var(--serif); font-size: .82rem; }
.cont-read .cr-x { color: var(--head); font-weight: 600; }
.cont-read .cr-r { color: rgb(177,4,14); }
.cont-read .cr-l { color: rgb(23,94,84); }
.cont-read .cr-off { color: var(--grey); }
html[data-theme="dark"] .cont-read .cr-r { color: rgb(244,121,91); }
html[data-theme="dark"] .cont-read .cr-l { color: rgb(89,179,169); }
.cont-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .7rem 0 0; font-family: var(--sans); }
.cont-ctl label { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cont-range { flex: 1 1 10rem; max-width: 22rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cont-n { min-width: 2rem; text-align: center; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: .15rem .45rem;
          border-radius: 999px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent); }
.cont-play { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
             background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .05rem; cursor: pointer; }
.cont-play:hover, .cont-play:focus-visible { border-bottom-color: var(--accent); }
@media (pointer: coarse) { .cont-play { position: relative; } .cont-play::after { content: ""; position: absolute; inset: -9px -6px; } }
.cont-play[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cont-play { display: none; } }
.cont-key { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }
.cont-key li { display: flex; align-items: baseline; gap: .65rem; }
.cont-key .sw { flex: none; width: 1.4rem; height: 0; border-top: 2px solid rgba(46,45,41, .85); transform: translateY(-.32em); }
.cont-key .k-r .sw { border-top-color: rgb(177,4,14); }
.cont-key .k-l .sw { border-top-color: rgb(23,94,84); }
.cont-key .k-f .sw { border-top-width: 1.5px; }
html[data-theme="dark"] .cont-key .k-r .sw { border-top-color: rgb(244,121,91); }
html[data-theme="dark"] .cont-key .k-l .sw { border-top-color: rgb(89,179,169); }
html[data-theme="dark"] .cont-key .k-f .sw { border-top-color: rgba(244,244,244, .85); }
.cont-key .nw { white-space: nowrap; }
.cont figcaption { margin-top: .9rem; font-size: .92rem; color: var(--grey); max-width: var(--prose); }
@media (max-width: 40rem) { .cont-read { min-height: 2.7em; } .cont-box { height: 15.5rem; } }
.cont-key li { transition: opacity .2s ease; }
.cont-key.focus li:not(.on) { opacity: .45; }
@media print { .cont-ctl, .cont-read { display: none; } .cont-box { break-inside: avoid; } }
/* Publications: the paper marked with the J and K keys */
.entry.pub.kb { background: var(--lift-bg); box-shadow: inset 3px 0 0 var(--gold), var(--lift); border-bottom-color: transparent; position: relative; z-index: 1; }
.entry.pub:focus { outline: none; }
.entry.pub:focus-visible:not(.kb) { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Research: every slide of the tour in a list, from a button under the title */
.tour-all { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-family: var(--sans); font-size: .62rem; font-weight: 600;
            letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: transparent; border: 1px solid var(--rule);
            border-radius: 999px; padding: .32rem .42rem .32rem .85rem; cursor: pointer; transition: background .2s, border-color .2s; }
.tour-all .ca-n { font-size: .6rem; font-weight: 600; min-width: 1.3rem; padding: .12rem .32rem; border-radius: 999px; text-align: center; letter-spacing: 0;
                  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent); }
.tour-all:hover, .tour-all:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.tour-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tour-all[hidden] { display: none; }
html:not(.js) .tour-all { display: none; }
dialog.tour-list { width: min(38rem, calc(100vw - 1.5rem)); }
.tour-index { list-style: none; margin: 0; padding: .45rem .5rem .7rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ti-go { display: grid; grid-template-columns: 2.1rem 1fr; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
         padding: .5rem .6rem; cursor: pointer; color: var(--ink); font: inherit; }
.ti-n { grid-row: 1 / 3; font-family: var(--sans); font-size: .7rem; color: var(--grey); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.ti-c { font-family: var(--serif); font-size: 1rem; line-height: 1.35; color: var(--head); }
.ti-r { margin-top: .12rem; font-family: var(--sans); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.ti-go:hover, .ti-go:focus-visible { background: var(--lift-bg); outline: none; }
.ti-go:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
.tour-index li.now .ti-go { box-shadow: inset 3px 0 0 var(--gold); }
.tour-index li.now .ti-n { color: var(--accent); font-weight: 600; }
/* Section headings: a link that copies the address of the section, shown on hover */
.sec-link { position: relative; display: inline-flex; vertical-align: -.12em; margin-left: .5rem; color: var(--gold); opacity: 0;
            text-decoration: none; transition: opacity .2s ease; }
.sec-link svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sect:hover .sec-link, .sec-link.done { opacity: 1; }
.sec-link:hover { color: var(--accent); }
.sec-link::after { content: "Link copied"; position: absolute; right: 0; top: calc(100% + .3rem); display: none;   /* (hidden, it takes no room at all) */
                   white-space: nowrap; font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
                   color: var(--accent); pointer-events: none; }
.sec-link.done::after { display: block; animation: sec-copied .25s ease; }
@keyframes sec-copied { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sec-link.done::after { animation: none; } }
@media (hover: none) { .sec-link { display: none; } }
@media print { .sec-link { display: none; } }
/* CV: each research interest opens the site search on its topic */
.int-q { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
         text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; text-decoration-thickness: 1px;
         transition: color .2s, text-decoration-color .2s; }
.int-q::after { content: ""; display: inline-block; width: .72em; height: .72em; margin-left: .35em; vertical-align: -.02em; opacity: 0;
                background: currentColor; transition: opacity .2s;
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M15 15l5 5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M15 15l5 5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.int-q:hover, .int-q:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.int-q:hover::after, .int-q:focus-visible::after { opacity: .8; }
.int-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
@media (hover: none) { .int-q::after { opacity: .55; } }
/* CV: the fellowships and grants, one line each, opening their cards on the Funding page */
.awards { margin-top: .6rem; border-top: 1px solid var(--hair); max-width: 46rem; }
.award { display: grid; grid-template-columns: 3.4rem 1fr 1.2rem; align-items: baseline; gap: .8rem; padding: .7rem .5rem;
         border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; border-radius: 4px; transition: background-color .2s; }
.award:hover, .award:focus-visible { background: var(--lift-bg); }
.award:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.aw-y { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; color: var(--sec); font-variant-numeric: tabular-nums; }
.aw-n { display: block; font-family: var(--display); font-weight: 700; font-size: 1.14rem; line-height: 1.25; color: var(--head); }
.aw-a { display: block; margin-top: .1rem; font-size: .9rem; color: var(--grey); }
.aw-st { display: inline-block; margin-left: .4rem; vertical-align: .08em; font-family: var(--sans); font-size: .56rem; font-weight: 600;
         letter-spacing: .12em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--hair); border-radius: 3px; padding: .08rem .38rem; }
.aw-go { color: var(--gold); transition: transform .25s; }
.award:hover .aw-go, .award:focus-visible .aw-go { transform: translateX(4px); }
@media (max-width: 34rem) { .award { grid-template-columns: 2.9rem 1fr 1rem; gap: .6rem; } }
@media (prefers-reduced-motion: reduce) { .award .aw-go { transition: none; } }
/* Research: a map of the papers, placed by the words they share */
.pmap { margin: .8rem 0 0; }
.pmap-lede { max-width: var(--prose); margin: 0 0 .9rem; }
.pmap-box { position: relative; height: clamp(17rem, 34vw, 23rem); border-radius: 8px; border: 1px solid var(--hair); overflow: hidden;
            background: radial-gradient(60rem 22rem at 50% 0%, rgba(182,177,169,.08), transparent 70%), #ffffff; }
html[data-theme="dark"] .pmap-box { background: radial-gradient(60rem 22rem at 50% 0%, rgba(244,121,91,.07), transparent 70%), #1c1b17; }
html:not(.js) .pmap-box, html:not(.js) .pmap-foot { display: none; }
.pmap-plot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.2rem; margin-top: .55rem; }
.pmap-read { flex: 1 1 22rem; margin: 0; min-height: 1.4em; font-family: var(--sans); font-size: .7rem; color: var(--grey); }
.pmap-read.on { font-family: var(--serif); font-size: .92rem; color: var(--ink); }
.pmap-read .pr-y { font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; color: var(--accent); margin-right: .3rem; }
.pmap-read .pr-n { color: var(--head); }
.pmap-read .pr-r { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-top: .15rem; }
.pmap-key { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; font-family: var(--sans); font-size: .6rem;
            font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.pmap-key li { display: inline-flex; align-items: center; gap: .4rem; }
.pmap-key li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: rgb(140,21,21); }
.pmap-key .k-ph::before { background: rgb(23,94,84); }
.pmap-key .k-pr::before { background: transparent; box-shadow: inset 0 0 0 1.4px var(--grey); }
html[data-theme="dark"] .pmap-key .k-fi::before { background: rgb(244,121,91); }
html[data-theme="dark"] .pmap-key .k-ph::before { background: rgb(147,203,188); }
@media (max-width: 40rem) { .pmap-box { height: 19rem; } .pmap-read { min-height: 3.6em; } }
@media print { .pmap-box { break-inside: avoid; } .pmap-read { display: none; } }
/* A switch in every header that pauses the animations, kept from page to page (WCAG 2.2.2) */
.motion-toggle { position: absolute; right: .95rem; bottom: .9rem; z-index: 3; width: 2rem; height: 2rem; padding: 0; border-radius: 50%;
                 display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--accent);
                 background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--rule);
                 opacity: .7; transition: opacity .2s, border-color .2s, background-color .2s; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; border-color: var(--gold); }
.motion-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.motion-toggle svg { width: .95rem; height: .95rem; }
.motion-toggle .mt-pause { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.motion-toggle .mt-play { fill: currentColor; display: none; }
html.still .motion-toggle .mt-pause { display: none; }
html.still .motion-toggle .mt-play { display: inline; }
html.still .motion-toggle { opacity: 1; border-color: var(--gold); }
html:not(.js) .motion-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
@media print { .motion-toggle { display: none; } }
html.still .scroll-cue span, html.still .news li:first-child::before, html.still .ticker-track, html.still .stop.now .stop-node::after,
html.still .stop.now .logo-disc::after, html.still .jm-ping, html.still .hero .aurora, html.still .visitors .ring { animation-play-state: paused; }
@media (max-width: 52rem) {                         /* on a phone or tablet: at the top of the header, under the menu bar */
  .motion-toggle { top: .85rem; bottom: auto; width: 2.3rem; height: 2.3rem; }
}
.hero:not(.page-hero) > .motion-toggle { right: auto; left: .95rem; }   /* home: clear of the legend of the event display */

/* Footer: on a phone the two institutions go on lines of their own, rather than leaving the dot at a line end. */
@media (max-width: 26rem) { .foot-aff .aff-sep { display: none; } .foot-aff .aff-a { display: block; } }

/* ---------- phones and tablets ---------- */
/* the home buttons keep their size: on a narrow two-column header the last one moves to a second row instead of being squeezed */
@media (min-width: 52.01rem) { .hero-cta { flex-wrap: wrap; } .hero-cta .btn { flex-shrink: 0; } }
/* on a touch screen the scroll cue is a chevron, not a mouse */
@media (hover: none) {
  .scroll-cue { height: 1.5rem; border: 0; border-radius: 0; }
  .scroll-cue span { top: .1rem; width: .75rem; height: .75rem; margin-left: -.375rem; border-radius: 0; background: none;
                     border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .scroll-cue span { animation-name: cue-chev; }
  @keyframes cue-chev { 0% { opacity: 0; transform: translateY(-3px) rotate(45deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px) rotate(45deg); } }
}
@media (max-width: 30rem) {
  /* news: the year and its icon above each item, the text across the whole width */
  .news li { grid-template-columns: auto 1fr; column-gap: .55rem; row-gap: .1rem; }
  .news li .when { grid-column: 1; grid-row: 1; padding-top: 0; align-self: center; }
  .news li .ix { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
  .news li .news-link { grid-column: 1 / -1; grid-row: 2; }
  .news li::before { top: .78rem; }
  /* papers and talks: the number and year above the entry, so that the entry and its abstract have the whole width */
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry .rail { text-align: left; padding-top: 0; margin-bottom: .2rem; font-size: .76rem; letter-spacing: .05em; }
  .entry .rail br { display: none; }
  .entry .rail .r-y::before { content: "\00a0·\00a0"; }
}
/* larger areas to tap for the remaining small controls, without moving anything */
@media (pointer: coarse) {
  .foot-mail, .foot-meta a, .tour-all, .talk-inv, details.fund-more > summary { position: relative; }
  .foot-meta a::after, details.fund-more > summary::after { content: ""; position: absolute; inset: -12px -8px; }
  .foot-mail::after, .tour-all::after, .talk-inv::after { content: ""; position: absolute; inset: -8px -4px; }
}
/* home, phones: each Explore card a compact row, its drawing beside the words (nine cards took a long scroll) */
@media (max-width: 34rem) {
  .ex-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .95rem; row-gap: .12rem; align-items: center;
             min-height: 0; padding: .85rem 2.4rem .9rem 1rem; }
  .ex-card .ex-icon { grid-column: 1; grid-row: 1 / span 3; width: 2.5rem; height: 1.6rem; margin: 0; }
  .ex-card .kicker { grid-column: 2; grid-row: 1; }
  .ex-card .ex-title { grid-column: 2; grid-row: 2; padding-right: 0; font-size: 1.2rem; }
  .ex-card .ex-meta { grid-column: 2; grid-row: 3; margin-top: .1rem; letter-spacing: .07em; }
  .ex-card .ex-go { top: 50%; right: 1rem; margin-top: -.72rem; }
  .ex-card .ex-num { display: none; }         /* (the big numerals would sit on the words) */
}
/* CV, phones: lower logo panels on the position and education cards */
@media (max-width: 30rem) { .blk-logos { height: 5rem; padding: .75rem 1.2rem; gap: 1.3rem; } }
/* touch screens: a tap tints in Fog grey rather than the browser's grey or blue, and a card that is one link presses in a little */
html { -webkit-tap-highlight-color: rgba(182,177,169, .16); }
html[data-theme="dark"] { -webkit-tap-highlight-color: rgba(218,215,203, .14); }
@media (hover: none) {
  a.ex-card:active, a.journal:active, a.pick:active, .theme:active, .news li:active { transform: scale(.985); }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  a.ex-card:active, a.journal:active, a.pick:active, .theme:active, .news li:active { transform: none; }
}
/* logos: a WebP copy for the browsers that read it, the picture element taking no box of its own */
picture.lg { display: contents; }
picture.lg > source { display: none; }      /* (else it becomes an empty item of a grid such as the journey's discs) */
/* the search titles are in Cormorant, whose overline sits far above a t (ascent 0.92 em, a t only 0.48 em high), where it read as an
   underline of the line above: the bar of t-bar is drawn just above the letter instead, leaning with the italic */
.ss-t .ov { position: relative; text-decoration: none; }
.ss-t .ov::after { content: ""; position: absolute; left: .15em; right: -.09em; top: .3em; border-top: .07em solid currentColor; }