/* Site style, mirrors plot_style.py:
   bg #fafafa, text #333333, grid #e8e8e8,
   titles EB Garamond bold, body Google Sans Flex,
   pill badges = white fill, 1.2px #333333 border (see add_pill_title).
   Layout inspired by rubenros.nl: one column, name on top, nav underneath.
   Rules under ".site" only affect our own pages, not the converted notebooks;
   ".site-header" is shared by both. */

:root {
  --bg: #fafafa;
  --text: #333333;
  --grid: #e8e8e8;
  --rule: rgba(51, 51, 51, .28);   /* list rules: visible on the texture */
  --accent: #FF4D14;   /* highlight colour: change it here */
}

/* ── header: name, then navigation (all pages, incl. notebooks) ─────────── */
.site-header {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 24px;
  font-family: 'Google Sans Flex', sans-serif;
  color: var(--text);
  box-sizing: border-box;
}
.site-header.wide { max-width: 1100px; }

.site-name {
  display: block;
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: 1.1rem;
}
.site-header nav a { color: var(--text); text-decoration: none; }
.site-header nav a:hover,
.site-header nav a.current { color: var(--accent); }

/* ── page body (our own pages only) ─────────────────────────────────────── */
body.site {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  background: transparent;   /* the texture (body::before) shows through */
}
.site *, .site-header { box-sizing: border-box; }

/* grainy colour texture (made by make_background.py), fixed behind everything.
   Two layers: a repeating grain tile on top of a small, smooth colour image. */
html { background: #C0F3E2; }   /* shows instantly, before the images arrive */
body.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    url("assets/grain.webp") 0 0 / 256px 256px repeat,
    #C0F3E2 url("assets/bg.webp") center / cover no-repeat;
  view-transition-name: page-bg;   /* stays put while pages change: no flash */
}
@media (max-aspect-ratio: 1/1) {
  /* phones: the text spans the whole width, so soften the texture slightly */
  body.site::before {
    background:
      url("assets/grain.webp") 0 0 / 256px 256px repeat,
      linear-gradient(rgba(192, 243, 226, .2), rgba(192, 243, 226, .2)),
      #C0F3E2 url("assets/bg-portrait.webp") center / cover no-repeat;
  }
}

body.home .site-header { padding-top: 22vh; }

.site main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 96px;
}
.site main.wide { max-width: 1100px; }

.site h1, .site h2 {
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.site h1 { font-size: 2rem; margin-bottom: 24px; }
.site h2 { font-size: 1.4rem; margin-top: 48px; }
.site h1 + h2 { margin-top: 0; }
.site h1.sr-only + h2 { margin-top: 0; }
/* page titles are kept for screen readers and search engines, but not shown */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site p { margin: 0 0 16px; }
.site a { color: var(--text); text-decoration: none; }
.site main a:hover { color: var(--accent); }

/* contact: label / value */
dl.contact {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 6px 16px;
  margin: 16px 0 0;
}
dl.contact dt { opacity: .72; }
dl.contact dd { margin: 0; }

/* lists with thin rules, like the gridlines in the figures */
.site ul.items {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.site ul.items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.entry { display: block; }
.entry-title { display: block; }
.meta { display: block; font-size: 15px; opacity: .78; }

.pills { display: flex; flex: none; gap: 8px; }
.pill {
  padding: 1px 12px;
  font-size: 13px;
  background: #fff;
  border: 1.2px solid var(--text);
  border-radius: 999px;
}
.site .pill { transition: color .2s, border-color .2s, transform 120ms ease-in-out, box-shadow 120ms ease-in-out; }
.site a.pill:hover { color: var(--accent); border-color: var(--accent); }

.empty { opacity: .65; margin-top: 16px; }

/* PNG viewer pages */
img.figure { display: block; max-width: 100%; height: auto; margin-top: 8px; }
.download { margin-top: 16px; font-size: 14px; }

@media (max-width: 520px) {
  .site-name { font-size: 2rem; }
  .site ul.items li { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ── home: the "start" button ───────────────────────────────────────────── */
.site-header .start {
  display: inline-block;
  margin-top: 28px;
  padding: 8px 30px;
  font-size: 1.1rem;
  color: var(--text);
  background: #fff;
  border: 1.2px solid var(--text);
  border-radius: 999px;
  text-decoration: none;
  transition: color .2s, border-color .2s, transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
}
.site-header .start:hover { color: var(--accent); border-color: var(--accent); }

/* ── ORCID link with logo (info page) ───────────────────────────────────── */
a.orcid { display: inline-flex; align-items: center; gap: 8px; }
.orcid-icon { flex: none; }

/* ── smooth page transitions ────────────────────────────────────────────────
   Cross-document view transitions: the page cross-fades and the name glides
   between its home position and the top. Supported by Chrome, Edge and
   Safari; other browsers simply switch pages instantly. */
@view-transition { navigation: auto; }

.site-name { view-transition-name: site-name; }
.site-header nav { view-transition-name: site-nav; }

::view-transition-group(page-bg) { animation: none; }
::view-transition-old(page-bg) { display: none; }
::view-transition-new(page-bg) { animation: none; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .4s; }
::view-transition-group(site-name),
::view-transition-group(site-nav) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── "lifted" clickable pills ────────────────────────────────────────────────
   On hover the pill moves up and to the right while a solid dark copy stays
   where it was (the shadow is offset by the opposite amount), so the pill looks
   raised off the page. Pressing it drops it back. Idea from motherduck.com. */
@media (hover: hover) {
  .site-header .start:hover { transform: translate(5px, -5px); box-shadow: -5px 5px 0 var(--text); }
  .site .pill:hover         { transform: translate(3px, -3px); box-shadow: -3px 3px 0 var(--text); }
}
.site-header .start:active,
.site .pill:active {
  transform: none;
  box-shadow: none;
  transition-duration: 30ms;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .start, .site .pill { transition: color .2s, border-color .2s; }
}