/* Change these colours to adjust the whole page. */
:root {
  --ink: #152c40;
  --muted: #546571;
  --accent: #096b70;
  --paper: #fff;
  --line: #d9e2e7;
  --pale: #f0f5f7;
}

/* Colour variables can fade smoothly when the header changes theme. */
@property --header-bg { syntax: "<color>"; inherits: true; initial-value: #152c40; }
@property --header-ink { syntax: "<color>"; inherits: true; initial-value: #fff; }
@property --header-muted { syntax: "<color>"; inherits: true; initial-value: #c1d0d5; }
@property --header-accent { syntax: "<color>"; inherits: true; initial-value: #7dd1d0; }
@property --header-line { syntax: "<color>"; inherits: true; initial-value: #365064; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--ink); color: var(--ink); font: 1rem/1.75 system-ui, sans-serif; timeline-scope: --hero-view; }
main, footer { background: var(--paper); }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: #103c50; text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #ce811b; outline-offset: 5px; }
img { display: block; width: 100%; height: auto; }
.hero img, .research-intro img, .group-photo { box-shadow: 0 3px 10px rgba(21, 44, 64, .12); }
h1, h2, h3 { line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.04em; margin: .7rem 0 1.5rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 2rem; letter-spacing: -.025em; }
h3 { font-size: 1.3rem; margin: 0 0 1rem; }
p { margin: 0 0 1.2rem; }
.container { width: min(1120px, 90%); margin-inline: auto; }
.eyebrow { color: var(--accent); font-size: .8rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }

/* The header starts dark and becomes light after the opening section. */
.site-header {
  --header-bg: var(--ink);
  --header-ink: #fff;
  --header-muted: #c1d0d5;
  --header-accent: #7dd1d0;
  --header-line: #365064;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
}
.topbar { width: min(1200px, calc(100% - 64px)); margin: auto; padding-block: 16px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; gap: 18px; align-items: center; color: var(--header-ink); text-decoration: none; }
.brand:hover { color: var(--header-ink); }
.monogram { font-size: 25px; font-weight: 750; letter-spacing: -1px; white-space: nowrap; }
.monogram > span { color: var(--header-accent); font-weight: 400; }
.brand-name { border-left: 1px solid var(--header-line); padding-left: 18px; font-size: 14px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.brand-name > span { display: block; color: var(--header-muted); font-weight: 400; }
nav { display: flex; flex-wrap: wrap; gap: 8px 25px; }
nav a { color: var(--header-muted); font-size: 15px; font-weight: 600; text-decoration: none; padding-block: 8px; white-space: nowrap; }
nav a:hover { color: var(--header-accent); }
/* Match v1's underline for the section selected in the address bar. */
body:not(.scroll-nav):not(:has(:target)) nav a[href="#home"],
body:not(.scroll-nav):has(#home:target) nav a[href="#home"],
body:not(.scroll-nav):has(#research:target) nav a[href="#research"],
body:not(.scroll-nav):has(#people:target) nav a[href="#people"],
body:not(.scroll-nav):has(#graduate:target) nav a[href="#graduate"],
body:not(.scroll-nav):has(#jobs:target) nav a[href="#jobs"] {
  color: var(--header-accent);
  box-shadow: 0 2px var(--header-accent);
}
/* A longer fade follows the hero as it scrolls away. */
@supports (animation-timeline: view()) and (timeline-scope: --hero-view) {
  .site-header {
    animation: light-header 1ms linear both;
    animation-timeline: --hero-view;
    animation-range: exit 45% exit 100%;
  }
  @keyframes light-header {
    from {
      --header-bg: #152c40;
      --header-ink: #fff;
      --header-muted: #c1d0d5;
      --header-accent: #7dd1d0;
      --header-line: #365064;
    }
    to {
      --header-bg: #fff;
      --header-ink: #152c40;
      --header-muted: #546571;
      --header-accent: #096b70;
      --header-line: #d9e2e7;
    }
  }
}
/* A translucent header blurs the page behind it; otherwise it stays opaque. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) and (background: color-mix(in srgb, black 90%, transparent)) {
  .site-header {
    background: color-mix(in srgb, var(--header-bg) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.skip-link { position: fixed; top: -5rem; left: 1rem; padding: .5rem 1rem; background: white; z-index: 2; }
.skip-link:focus { top: .5rem; }

/* Two columns on wide screens; reading text stays a comfortable width. */
.hero { background: var(--ink); color: #fff; padding-block: 2.75rem; view-timeline-name: --hero-view; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.hero p:last-child { color: #c1d0d5; margin-bottom: 0; }
section { padding-block: 4rem; border-top: 1px solid var(--line); }
/* Contain each floated picture while the text wraps around it. */
.research-topic { display: flow-root; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.research-topic:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.research-topic > h3 { margin: 0 0 1rem; }
.research-intro { float: right; width: min(30%, 280px); margin: 0 0 1rem 2rem; }
.research-intro img { max-width: 280px; }
.research-topic p:last-child { margin-bottom: 0; }
.group-photo { margin-bottom: 2.5rem; }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.people-grid ul { list-style: none; padding: 0; margin: 0; }
.people-grid li { padding-block: .25rem; }
.muted { color: var(--muted); }
.reading { max-width: 76ch; }
.jobs { border-left: 3px solid var(--accent); padding-left: 1.5rem; }
footer { border-top: 1px solid var(--line); padding-block: 2rem; color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Seminar rows stack naturally on a small screen. */
.event-list { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.35; }
.event-list li { display: flex; flex-wrap: wrap; gap: .1rem 1rem; padding-block: .35rem; border-bottom: 1px solid var(--line); }
.event-list time { flex: 0 0 11rem; color: var(--muted); font-size: .85rem; }
.event-list li > div { flex: 1 1 18rem; }
.event-list a { font-weight: 400; }

/* Let navigation wrap and columns stack on smaller screens. */
@media (max-width: 950px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 16px; }
  .brand-name { display: none; }
  html { scroll-padding-top: 10rem; }
}
@media (max-width: 800px) {
  .hero { padding-block: 2rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero img { max-height: 350px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .research-intro { float: none; width: min(100%, 280px); margin: 0 auto 1.25rem; }
}
@media (max-width: 480px) {
  .site-header { position: static; }
  .topbar { width: calc(100% - 40px); padding-block: 20px; }
  nav { column-gap: 20px; }
  .hero { padding-block: 1.5rem; }
  .people-grid { grid-template-columns: 1fr; }
  section { padding-block: 2.5rem; }
  html { scroll-padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Colours inspired by the glowing grid image. */

/* Local, openly licensed fonts also work in offline previews. */
@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #1b1621;
  --muted: #675d6a;
  --accent: #a34a16;
  --paper: #fdfaf7;
  --line: #e8dfe6;
  --pale: #f5edf4;
}

body { font-family: "Fira Sans", system-ui, sans-serif; font-weight: 300; }
.monogram { font-weight: 700; }
.eyebrow { font-weight: 600; }

/* Copper echoes the grid; violet marks visited content links. */
a:hover { color: #a34a16; }
main a:visited, footer a:visited { color: #773c8b; }
a:focus-visible { outline-color: #5daee6; }
.hero .eyebrow { color: #e7a86a; }
.hero p:last-child { color: #d7c8d8; }
.hero img, .research-intro img, .group-photo { box-shadow: 0 3px 10px rgba(27, 22, 33, .16); }
.hero img { box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }

/* Keep the header in the same palette during its dark-to-light fade. */
.site-header {
  --header-ink: #fdfaf7;
  --header-muted: #d7c8d8;
  --header-accent: #f0b37d;
  --header-line: #493849;
}
@keyframes light-header {
  from {
    --header-bg: #1b1621;
    --header-ink: #fdfaf7;
    --header-muted: #d7c8d8;
    --header-accent: #f0b37d;
    --header-line: #493849;
  }
  to {
    --header-bg: #f3eeec;
    --header-ink: #1b1621;
    --header-muted: #675d6a;
    --header-accent: #a34a16;
    --header-line: #ddd2d7;
  }
}

/* The same image sits behind the header and opening section. */

body { background: var(--ink); }
main { background: transparent; }
section { background: var(--paper); }
/* These sections keep their text width but paint edge to edge. */
section.container {
  width: 100%;
  padding-inline: max(5%, calc(50% - 560px));
}
.hero {
  --header-height: 86px;
  position: relative;
  background: transparent;
  padding-block: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-height)) 0 0;
  background: linear-gradient(90deg, rgba(12, 9, 19, .48), rgba(12, 9, 19, .12)),
    url("sfondo-grid-glow-centered.png") center / cover no-repeat;
}
.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(170px, 44vw, 390px);
}
.hero h1 { max-width: 25ch; color: rgba(255, 255, 255, .90); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }

.menu-toggle {
  display: none;
  background: transparent;
  color: var(--header-ink);
  border: 1px solid var(--header-line);
  border-radius: 4px;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: .35rem .6rem;
  cursor: pointer;
}
.menu-toggle:focus-visible { outline: 3px solid var(--header-accent); outline-offset: 3px; }

/* Only the white GSS letters soften in the dark header. */
.monogram { display: inline-flex; align-items: center; gap: .22em; }
.monogram-star { display: inline-flex; }
.monogram-star svg { width: .62em; height: .62em; }
.site-header .monogram .monogram-gss { color: var(--header-ink); font-weight: inherit; opacity: .85; }
.site-header.is-light .monogram-gss { opacity: 1; }

/* Keep hover separate from the active section's lower line. */
.site-header .brand:any-link { color: var(--header-ink); }
.site-header nav a:any-link { color: var(--header-muted); }
.site-header nav a:any-link:hover { color: var(--header-accent); }
.site-header nav a[aria-current="location"]:any-link {
  color: var(--header-accent);
  box-shadow: 0 2px var(--header-accent);
}
/* Fixed visited colours work reliably as the header changes theme. */
.site-header .brand:visited { color: #fdfaf7; }
.site-header nav a:visited { color: #f1e4e9; }
.site-header nav a[aria-current="location"]:visited { color: #f0b37d; }
.site-header.is-light .brand:visited { color: #1b1621; }
.site-header.is-light nav a:visited { color: #675d6a; }
.site-header.is-light nav a[aria-current="location"]:visited { color: #a34a16; }

/* The header shows the image at the top, then fades to warm light. */
@supports (animation-timeline: view()) and (timeline-scope: --hero-view) {
  @keyframes light-header {
    from {
      --header-bg: rgba(27, 22, 33, .32);
      --header-ink: #fdfaf7;
      --header-muted: #f1e4e9;
      --header-accent: #f0b37d;
      --header-line: rgba(255, 255, 255, .22);
    }
    to {
      --header-bg: #f3eeec;
      --header-ink: #1b1621;
      --header-muted: #675d6a;
      --header-accent: #a34a16;
      --header-line: #ddd2d7;
    }
  }
}

/* When scroll animation is unavailable, JavaScript starts a gentle fade. */
@supports not ((animation-timeline: view()) and (timeline-scope: --hero-view)) {
  .site-header { transition: background-color 1.5s, border-color 1.5s; }
  .site-header .brand,
  .site-header .brand-name,
  .site-header .brand-name > span,
  .site-header .monogram > span,
  .site-header nav a,
  .site-header .menu-toggle { transition: color 1.5s, border-color 1.5s; }
  .site-header.is-light {
    --header-bg: #f3eeec;
    --header-ink: #1b1621;
    --header-muted: #675d6a;
    --header-accent: #a34a16;
    --header-line: #d2c3ca;
  }
  .site-header.is-light .monogram > span { color: var(--header-ink); }
}

/* Firefox keeps a solid fallback and uses a light 4px blur when supported. */
@supports (-moz-appearance: none) {
  .site-header {
    background: var(--header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition-duration: .7s;
  }
  @supports (backdrop-filter: blur(4px)) and (background: color-mix(in srgb, black 90%, transparent)) {
    .site-header {
      background: color-mix(in srgb, var(--header-bg) 90%, transparent);
      backdrop-filter: blur(4px);
    }
  }
  .site-header .brand,
  .site-header .brand-name,
  .site-header .brand-name > span,
  .site-header .monogram > span,
  .site-header nav a,
  .site-header .menu-toggle { transition-duration: .7s; }
  @keyframes light-header {
    from {
      --header-bg: #1b1621;
      --header-ink: #fdfaf7;
      --header-muted: #f1e4e9;
      --header-accent: #f0b37d;
      --header-line: #493849;
    }
    to {
      --header-bg: #f3eeec;
      --header-ink: #1b1621;
      --header-muted: #675d6a;
      --header-accent: #a34a16;
      --header-line: #ddd2d7;
    }
  }
}

@media (max-width: 950px) {
  .hero { --header-height: 145px; }
}
@media (max-width: 480px) {
  .hero { --header-height: 240px; }
  .hero-inner { min-height: 340px; }
}

/* Keep a compact menu available when the full navigation will not fit. */
@media (max-width: 700px) {
  .site-header { position: sticky; }
  .topbar {
    width: calc(100% - 40px);
    padding-block: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .monogram { font-size: clamp(calc(20px - 2pt), calc(6vw - 2pt), calc(25px - 2pt)); }
  .js-nav .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-header nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }
  .js-nav .site-header nav { display: none; }
  .js-nav .site-header.menu-open nav { display: flex; }
  .site-header nav a { padding-block: .5rem; }
  .hero { --header-height: 70px; }
  html { scroll-padding-top: 5rem; }
}

@media (max-width: 300px) {
  .site-header .brand { display: none; }
}