/* ==========================================================================
   Omer Bobrowski — personal site
   A small, dependency-free stylesheet. Edit the tokens in :root to restyle.
   ========================================================================== */

:root {
  /* colour */
  --bg:            #ffffff;
  --surface:       #f6f9fb;
  --surface-2:     #eef3f7;
  --ink:           #16202b;
  --ink-soft:      #3d4c5c;
  --muted:         #64768a;
  --line:          #e2e8ee;
  --accent:        #16607e;
  --accent-hover:  #0f4a63;
  --accent-soft:   #e7f1f6;
  --gold:          #a8762a;
  --gold-bright:   #ffc94a;   /* the rule over banner photographs */
  --shadow-sm:     0 1px 2px rgba(16, 32, 43, .06), 0 1px 3px rgba(16, 32, 43, .04);
  --shadow-md:     0 2px 4px rgba(16, 32, 43, .05), 0 8px 24px rgba(16, 32, 43, .07);

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* layout */
  --max:     1120px;
  --max-txt: 760px;
  --radius:  12px;
  --radius-sm: 8px;

  color-scheme: light;
}

/* This site is light-only by design: no dark-mode palette, and the page never
   follows the visitor's system theme. Every colour comes from the tokens above. */

/* --------------------------------------------------------------- reset ---- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 .5em;
  font-weight: 650;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
h3 { font-size: 1.12rem; font-weight: 640; }
p  { margin: 0 0 1.1em; }

ul { padding-left: 1.15em; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- layout ---- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
/* Keeps prose to a comfortable measure while staying flush with the grid. */
.wrap-narrow > * { max-width: var(--max-txt); }

section { padding-block: clamp(1.75rem, 1.15rem + 2vw, 2.75rem); }
section + section { border-top: 1px solid var(--line); }
section.tint { background: var(--surface); }

.section-head { margin-bottom: 1.25rem; }
.section-head p { color: var(--muted); margin: 0; max-width: 62ch; }
.eyebrow {
  display: block;
  font-size: .76rem; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: .45rem;
}

.lead { font-size: 1.1rem; color: var(--ink-soft); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* -------------------------------------------------------------- header ---- */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 62px;
}
.brand {
  font-weight: 680; font-size: 1.02rem; letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap;
}
.brand:hover { color: var(--accent); text-decoration: none; }
.brand span { color: var(--muted); font-weight: 450; }
.brand bdi { font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif; }
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; gap: .15rem; align-items: center; }
.nav a {
  color: var(--ink-soft);
  font-size: .945rem; font-weight: 520;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm); padding: .4rem .6rem;
  font-size: 1rem; cursor: pointer; line-height: 1;
}

@media (max-width: 800px) {
  /* The subtitle is the first thing to go when the header gets tight. */
  .brand span { display: none; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: .5rem 24px 1rem;
    box-shadow: var(--shadow-md);
  }
  .nav.open { display: flex; }
  .nav a { padding: .7rem .6rem; }
}

/* ------------------------------------------------- banners and the hero ----
   Every page opens on a photograph, set inline on the banner element so that
   swapping a photo is a one-line change in that page's HTML:

     <div class="banner-base pagebanner"
          style="background-image:url('images/banner-group.jpg')">

   The path is written inline rather than through a CSS custom property on
   purpose: a url() inside a custom property resolves relative to the
   stylesheet (css/), not the page, which silently breaks the image.

   A scrim sits over the photograph so white type stays legible no matter how
   busy the picture is, and a gold rule carries across from the old site.
   -------------------------------------------------------------------------- */

.banner-base {
  position: relative;
  background-color: #16242f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.banner-base > .wrap { position: relative; z-index: 1; }

/* --- inner pages ---------------------------------------------------------- */

.pagebanner {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(200px, 8.65rem + 13.3vw, 332px);
}
.pagebanner > .wrap { width: 100%; }

/* With scripting on, the banner is pinned under the header and shrinks as
   the page scrolls (see js/main.js). Without it, everything below is inert
   and the banner behaves exactly as it always has. */
.has-shrink-banner .pagebanner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  min-height: 0;
}
.has-shrink-banner .pagebanner > .wrap { overflow: hidden; }
/* A white veil over the photograph, lit up as the banner collapses. It sits
   above the picture and its scrim but below the title, so only the image
   brightens. */
.has-shrink-banner .pagebanner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #fff; opacity: var(--veil, 0); pointer-events: none;
}
.has-shrink-banner .pagebanner > .wrap { position: relative; z-index: 2; }
.pagebanner::after {
  content: ""; position: absolute; inset: 0;
  /* Deliberately light: the photograph is the point. The scrim only builds
     in the bottom band where the type sits, and the type carries its own
     shadow so it stays readable without drowning the picture. */
  background:
    linear-gradient(to bottom,
              rgba(10, 22, 30, .10) 0%,
              rgba(10, 22, 30, .34) 50%,
              rgba(10, 22, 30, .10) 100%),
    linear-gradient(to right,
              rgba(10, 22, 30, .22) 0%,
              rgba(10, 22, 30, .10) 40%,
              rgba(10, 22, 30, 0) 70%);
}
.pagebanner .wrap { padding-block: clamp(1rem, .75rem + 1.2vw, 1.6rem); text-align: center; }
/* The gold rule is drawn by the title itself, so it is exactly as wide as
   the text above it. */
.pagebanner h1, .pagebanner .banner-title {
  color: #fff; margin: 0; display: inline-block;
  font-weight: 650; line-height: 1.15;
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.7rem);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 3px 22px rgba(0, 0, 0, .7);
}
.pagebanner h1::after, .pagebanner .banner-title::after {
  content: ""; display: block;
  height: 6px; border-radius: 3px; margin-top: .55rem;
  background: var(--gold-bright);
}
.banner-rule {
  width: 72px; height: 4px; border-radius: 3px;
  background: var(--gold-bright);
  margin-bottom: 1rem;
}


/* --- home: the banner behaves exactly like every other page's, and the
       introduction sits below it on white, the way the previous site did -- */

.intro-section { padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.intro {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: start;
}
.intro h1 { margin-bottom: .25rem; }
.intro-title {
  color: var(--accent); font-weight: 620;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  margin-bottom: 1rem;
}
.intro p { color: var(--ink-soft); max-width: 62ch; }
/* On white the rule takes the page's accent rather than the banner gold: the
   gold belongs over photographs, and beside teal links it read as a stray. */
.intro .banner-rule { background: var(--accent); margin-bottom: 1.15rem; }
.intro .chips { margin-top: 1.25rem; }

.portrait {
  width: clamp(128px, 14vw, 190px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(16, 32, 43, .13);
}

@media (max-width: 640px) {
  .intro { grid-template-columns: 1fr; }
  .portrait { width: 124px; }
}

/* --------------------------------------------------------------- chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 550;
  padding: .36rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.hero .chip {
  border-color: rgba(255, 255, 255, .42); background: rgba(9, 21, 29, .42);
  color: #eaf3f8; backdrop-filter: blur(6px);
}
.hero a.chip:hover { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .55); color: #fff; }

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

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
section.tint .card { background: var(--bg); }

/* Funder marks on the grant cards: heights are set per logo shape so the
   square EPSRC lockup and the wide Leverhulme wordmark read at the same
   visual weight. */
.grant-logo { display: block; height: 64px; width: auto; margin-bottom: 1rem; }
.grant-logo-wide { height: 46px; margin-top: .5rem; }

/* Education reads as a stack of full-width entries: degree and year, then
   the department with the institution's mark out to the right, then the
   advisors and the thesis. */
.edu-list { display: grid; gap: 1rem; max-width: 720px; }
.edu-list .card { position: relative; }
.edu-place { margin: 0 0 .35rem; }
.edu-line { margin: 0 0 .2rem; }
/* The institution's mark sits in the card's top right corner, with the text
   kept clear of it. */
.edu-logo {
  position: absolute; top: 1.5rem; right: 1.5rem;
  height: 53px; width: auto; max-width: 30%; object-fit: contain;
}
.edu-list .card > :not(.edu-logo) { padding-right: 5.5rem; }

/* The mark that opens each area-of-interest card, in place of a number. */
.card-icon { display: block; width: 52px; height: 52px; margin-bottom: .9rem; }

/* The Queen Mary lockup sits beside the title line, dropping below it on
   narrow screens rather than squeezing the text. */
.name-row {
  display: flex; align-items: center; gap: 2rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.name-row .intro-title { margin-bottom: 0; }
.name-logo { height: 36px; width: auto; }
.card h3 { margin-bottom: .6rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card ul { margin: 0; color: var(--ink-soft); }
.card li { margin-bottom: .35rem; }

.card-accent { border-top: 3px solid var(--accent); }

.card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-weight: 680; font-size: .9rem; font-variant-numeric: tabular-nums;
  margin-bottom: .85rem;
}

/* -------------------------------------------------------- publications ---- */

.filters {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: 1rem 1.15rem; margin-bottom: 1.75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 20;
  backdrop-filter: blur(8px);
}
.filters input[type="search"], .filters select {
  font: inherit; font-size: .94rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  min-width: 0;
}
.filters input[type="search"] { flex: 1 1 240px; }
.filters select { flex: 0 0 auto; }
.filters input::placeholder { color: var(--muted); }
#pub-count { color: var(--muted); font-size: .9rem; margin-left: auto; white-space: nowrap; }

.pub-group { margin-bottom: 2.5rem; }
.pub-group > h2 {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}

.pub {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: 1.15rem .75rem 1.15rem .5rem;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.pub:hover { background: var(--surface); }
.pub-id {
  font-variant-numeric: tabular-nums;
  font-size: .85rem; font-weight: 640; color: var(--muted);
  padding-top: .2rem;
}
.pub-title { font-weight: 620; font-size: 1.02rem; line-height: 1.4; margin-bottom: .2rem; color: var(--ink); }
.pub-authors { color: var(--ink-soft); font-size: .95rem; margin-bottom: .1rem; }
.pub-authors .me { font-weight: 660; color: var(--ink); }
.pub-venue { color: var(--muted); font-size: .93rem; font-style: italic; }
.pub-venue .year { font-style: normal; font-variant-numeric: tabular-nums; }
.pub-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.pub-links a {
  font-size: .8rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--bg);
}
.pub-links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.pub[hidden] { display: none; }

@media (max-width: 560px) {
  .pub { grid-template-columns: 1fr; gap: 0; }
  .pub-id { padding-top: 0; margin-bottom: .2rem; }
}

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

.term { margin-bottom: 2.25rem; }
.term > h2 {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: .6rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem;
}
.course {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .85rem;
  padding: .95rem .5rem; border-bottom: 1px solid var(--line);
}
.course:hover { background: var(--surface); border-radius: var(--radius-sm); }
.course-code {
  font-family: var(--font-mono); font-size: .84rem;
  color: var(--muted); flex: 0 0 auto;
  background: var(--surface-2); padding: .12rem .5rem; border-radius: 4px;
}
.course-name { font-weight: 600; flex: 1 1 260px; }
.course-where { color: var(--muted); font-size: .9rem; }

/* --------------------------------------------------------------- group ---- */

.people { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.person {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.person .dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translateY(-2px);
}
.person.past .dot { background: var(--muted); opacity: .55; }
.person b { font-weight: 620; }
/* A linked name stays in body ink and picks up the accent on hover, so the
   list reads as a list of people rather than a wall of links. */
.person a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.person a:hover { color: var(--accent); text-decoration-color: currentColor; }
.person .where { display: block; color: var(--muted); font-size: .875rem; font-weight: 450; }

/* --------------------------------------------------------------- talks ---- */

.talk {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .2rem 1.25rem;
  padding: 1.15rem .5rem; border-bottom: 1px solid var(--line);
}
.talk:hover { background: var(--surface); border-radius: var(--radius-sm); }
.talk-date { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: .15rem; }
.talk-title { font-weight: 620; margin-bottom: .15rem; }
.talk-event { color: var(--muted); font-size: .93rem; }
@media (max-width: 560px) { .talk { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- employment ---- */

/* One card per institution, with the posts held there listed inside it. Two
   to a row, so a job title and its dates share a line comfortably. */
.grid-emp { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 560px) { .grid-emp { grid-template-columns: 1fr; } }
/* Institution and unit on the left, the mark on the right, the two sharing
   the top of the card. */
.emp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem; margin-bottom: .9rem;
}
.emp-head h3 { margin-bottom: 0; }
.emp-logo { flex: none; height: 38px; width: auto; max-width: 42%; object-fit: contain; }
.role-unit { margin: .1rem 0 0; }
.role {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line);
}
.role-title { font-weight: 560; }
.role-date {
  color: var(--muted); font-size: .9rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- contact ---- */

/* Columns are capped rather than fluid, so a single card stays a sensible
   width instead of stretching the address across the whole page. */
.contact-grid {
  display: grid; gap: 1.25rem; justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 520px));
}
.dl { margin: 0; }
.dl div { display: flex; gap: .85rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.dl div:last-child { border-bottom: 0; }
.dl dt { flex: 0 0 5.5rem; color: var(--muted); font-size: .88rem; padding-top: .1rem; }
.dl dd { margin: 0; flex: 1 1 auto; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 2.5rem;
  color: var(--muted); font-size: .9rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--ink-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ------------------------------------------------------------- utility ---- */

.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

@media print {
  .site-header, .site-footer, .filters, .pagebanner::after { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .pub { break-inside: avoid; }
}