/* tokens.css: every colour, font, size, space, shape and duration of the site.
   The colours are the owner's sequential ramp "Termeh", which he made for water surface elevation and
   depth (his words of 2026-11-14). Every semantic colour below is one of the seven, or a mix of them in
   OKLab; the night ground and the day ink are also darkened with black.

   Two themes. The html element carries data-theme="light" (day) or "dark" (night); src/scripts/theme.js
   sets it before the first paint, from the stored choice or else the visitor's system setting. Without
   the script the page follows the system setting through color-scheme. Each semantic colour is
   light-dark(day, night). The contrast of every pair of text and ground is computed by
   tools/theme_contrast.py, which holds the same mixes. */
:root {
  color-scheme: light dark;

  /* Termeh, light to deep */
  --foam-mist: #e5f0ee;
  --glacial-blue: #c8dfe3;
  --powder-aqua: #a9ccd7;
  --river-teal: #7fb5c1;
  --slate-blue: #5d95a8;
  --deep-channel: #3e738e;
  --night-current: #274e68;

  /* the page: ground, surfaces, ink */
  --ground: light-dark(var(--foam-mist), color-mix(in oklab, var(--night-current) 62%, black));
  --wash: light-dark(color-mix(in oklab, var(--foam-mist) 55%, var(--glacial-blue)), color-mix(in oklab, var(--night-current) 78%, black));
  --ink: light-dark(color-mix(in oklab, var(--night-current) 78%, black), var(--foam-mist));
  --ink-2: light-dark(color-mix(in oklab, var(--deep-channel) 45%, var(--night-current)), var(--powder-aqua));
  --rule: light-dark(color-mix(in oklab, var(--slate-blue) 60%, var(--deep-channel)), var(--slate-blue));
  --rule-soft: light-dark(var(--powder-aqua), color-mix(in oklab, var(--deep-channel) 55%, var(--night-current)));

  /* his name: the block that marks it, and the type on it */
  --bed: light-dark(color-mix(in oklab, var(--deep-channel) 60%, var(--night-current)), var(--slate-blue));
  --on-bed: light-dark(var(--foam-mist), color-mix(in oklab, var(--night-current) 45%, black));

  /* links, focus, the open page */
  --link-line: light-dark(color-mix(in oklab, var(--deep-channel) 45%, var(--night-current)), var(--slate-blue));
  --link-hover: light-dark(var(--night-current), var(--river-teal));
  --focus: light-dark(var(--deep-channel), var(--river-teal));
  --current: light-dark(var(--deep-channel), var(--river-teal));     /* the line under the menu item of the page that is open */

  /* the first page of a paper: its white takes this tint (multiply), so its black type stays black */
  --sheet: light-dark(var(--glacial-blue), color-mix(in oklab, var(--glacial-blue) 60%, var(--powder-aqua)));

  /* the pop-up viewer of the certificates (2026-11-14): a deep, opaque layer over the page,
     with light type on it in both themes. tools/theme_contrast.py checks the type on this colour.
     It was 97% opaque; on a phone in the day theme the page's own text showed through under the
     caption (verification, 2026-11-14), so it is now fully opaque. */
  --scrim-solid: light-dark(color-mix(in oklab, var(--night-current) 85%, black), color-mix(in oklab, var(--night-current) 40%, black));
  --scrim: var(--scrim-solid);
  --on-scrim: var(--foam-mist);
  --on-scrim-2: var(--powder-aqua);

  /* the logos of organisations before their records (Logo.astro, the owner's words of 2026-11-14): by day
     on the page ground, by night on a light plate, since most logos are dark on white */
  --logo-plate: light-dark(transparent, var(--foam-mist));

  /* the river band under the menu of every page but the home page (RiverBand.astro): the colour of its box
     until its still picture has come. The moving water of the band uses the --river tokens below. */
  --water: light-dark(var(--deep-channel), var(--night-current));

  /* the river of the home page with his name as stone in the water and a weir (HeroRiver.astro, src/scripts/hero-river.js,
     2026-11-14). hero-river.js reads the seven Termeh colours and every token below. The water uses the
     ramp and mixes of it; the land uses the greens and sand tones below, chosen to sit beside the ramp.
     After a change of any of these, the four still pictures in public/hero/ are photographed again. */
  --river-pool: light-dark(color-mix(in oklab, var(--night-current) 82%, black), color-mix(in oklab, var(--night-current) 66%, black));
  --river-foam: light-dark(color-mix(in oklab, var(--glacial-blue) 70%, var(--foam-mist)), color-mix(in oklab, var(--powder-aqua) 70%, var(--glacial-blue)));
  --river-glint: light-dark(color-mix(in oklab, var(--foam-mist) 86%, var(--glacial-blue)), color-mix(in oklab, var(--foam-mist) 50%, var(--glacial-blue)));
  --river-milk: light-dark(color-mix(in oklab, var(--powder-aqua) 60%, var(--glacial-blue)), color-mix(in oklab, var(--river-teal) 62%, var(--slate-blue)));
  --river-ripple-light: light-dark(var(--powder-aqua), var(--river-teal));
  --river-ripple-dark: light-dark(var(--night-current), color-mix(in oklab, var(--night-current) 58%, black));
  --river-meadow-a: light-dark(#d5d8b6, #1d3d42);                     /* dry ridges, thin grass */
  --river-meadow-b: light-dark(#bccdaa, #183840);                     /* grass */
  --river-meadow-c: light-dark(#93b08f, #13323b);                     /* swales and old channels */
  --river-soil: light-dark(#cfc3a4, #2b4347);
  --river-floor: light-dark(#4e7663, #0f2b33);                        /* the ground under the wood */
  --river-tree-a: light-dark(#709a79, #25534f);
  --river-tree-b: light-dark(#54816b, #1d4749);
  --river-tree-c: light-dark(#90aa76, #2e5d52);
  --river-tree-light: light-dark(#b8ca93, #5f9090);                   /* the lit side of a crown; by night the moon on it */
  --river-tree-shade: light-dark(#274f46, #0c252e);
  --river-sand-dry: light-dark(#efe6cf, #62737a);
  --river-sand-wet: light-dark(#c9b993, #3f5258);
  --river-gravel: light-dark(#a9a18e, #37494f);
  --river-reed: light-dark(#87a172, #27514b);
  --river-scarp: light-dark(#7f705a, #1f3338);
  --river-log: light-dark(#cfc5ae, #6f8389);
  --river-shadow: light-dark(color-mix(in oklab, var(--night-current) 58%, black), color-mix(in oklab, var(--night-current) 24%, black));
  /* his name as stone in the river (2026-11-14): three tones for its faces under the light, and the moss at the water line */
  --river-rock-light: light-dark(#f8f3e7, #cfdcdc);                   /* a face that looks to the light */
  --river-rock: light-dark(#c9c2b1, #8ea2a8);                         /* a level face */
  --river-rock-shade: light-dark(#5d5950, #25373f);                   /* a face that looks away, and the wet band */
  --river-moss: light-dark(#73875c, #2f5e52);
  /* the weir below his name: its concrete, and the roof of the gauge hut */
  --river-concrete: light-dark(#dddbd1, #8c9ea3);
  --river-roof: light-dark(#a56f5b, #56646b);
  /* which part of the frame a box narrower than the frame shows (0 to 1; hero-river.js reads it on
     #river-art, and site.css sets 1 on a phone, which shows the frame from the first letter to the weir) */
  --river-focus-x: 0.5;
  /* the disc of the pause and resume button on the picture */
  --flow-disc: color-mix(in oklab, var(--ground) 84%, transparent);

  /* type: one family, two axes */
  --font: "Bahnschrift", sans-serif;
  --wght-text: 400;
  --wght-strong: 600;
  --wdth-text: 100%;
  --wdth-tight: 87.5%;
  --size-small: 0.9375rem;
  --size-text: 1.0625rem;
  --size-head: 1.3125rem;                  /* a heading inside a page (h3 of A1) */
  --size-title: 1.75rem;                   /* the title of a page (h2 of A1) */
  --size-mail: clamp(1.0625rem, 0.7rem + 1.5vw, 1.5rem);
  --size-lead: clamp(1.375rem, 0.9rem + 1.5vw, 2.0625rem);
  --size-name: clamp(1.0625rem, 0.4rem + 2.4vw, 2.125rem);   /* his name in the menu: about twice --size-text on a wide screen */
  --lh-text: 1.5;
  --lh-loose: 1.7;
  --lh-lead: 1.36;
  --lh-title: 1.35;
  --lh-head: 1.3;
  --measure: 40rem;

  /* space */
  --s1: 0.375rem;
  --s2: 0.75rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3.5rem;
  --s6: 6rem;

  /* layout: the left bank of the stream is the one rule of the page */
  --bank: 6.25%;
  --tick: 1.25rem;
  --col-when: 10rem;                       /* the date column from 48rem: "Oct 2026–Present" on one line; longer dates widen their list */
  --band-h: clamp(4.5rem, 3rem + 5vw, 8.5rem);   /* the river band under the menu of every page but the home page: 72 px on a phone, 120 px at 1440 px, 136 px at most */
  --hit: 2.75rem;                          /* 44 px: the smallest target for a finger */
  --logo-h: 2rem;                          /* a logo of an organisation: at most 32 px high (Logo.astro) */
  --logo-w: 8rem;                          /* ... and at most 128 px wide */
  --logo-pad: 0.25rem;                     /* the plate around it */
  --cover-w: 7.5rem;                       /* a journal cover of the Publications page, the smallest width */

  /* shape */
  --radius-in: 2px;
  --radius-out: 5px;
  --radius-hero: 0 var(--radius-out) var(--radius-out) 0;   /* the river picture: square where it meets the left bank line */
  --radius-round: 50%;                     /* the disc of the pause and resume button */
  --stroke: 1px;
  --ring: 2px;

  /* motion. Hover and focus change colour only (--dur-fast). The change of theme is the one larger
     motion (the owner's words of 2026-11-14): theme.js reads --dur-theme and --ease-theme for the
     circle that opens from the toggle, and the sun turns into the moon in --dur-icon. */
  --dur-fast: 120ms;
  --dur-icon: 420ms;
  --dur-theme: 520ms;
  --dur-live: 300ms;                       /* the moving river fades in over its still picture */
  --ease-live: linear;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-theme: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* the still band fades into the page at the sides on a very wide screen */
  --fade-sides: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
/* site.css: every rule of the site outside the token block. The tokens (section 1) are in
   tokens.css, which the layout loads before this file. Every colour, font, radius, duration
   and easing used here is a token.

   2. Base                        7. Records: rows, entries, small text
   3. The page, its rule, menu    8. About
   4. The river: hero and band    9. Projects
   5. Home                       10. Contact and the footer
   6. A reach: page title on the bank, content in the water
                                 11. Publications
                                 12. The menu (one row, 2026-11-14)
                                 13. Day and night: the theme toggle and the change of theme */

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-2) var(--ground);
  scroll-padding-top: var(--s3);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--wght-text);
  font-stretch: var(--wdth-text);
  font-size: var(--size-text);
  line-height: var(--lh-text);
  font-kerning: normal;
  caret-color: var(--focus);
}
::selection { background: var(--bed); color: var(--on-bed); }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: var(--wght-strong); line-height: var(--lh-head); text-wrap: balance; }
p, figcaption, caption { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
cite { color: var(--ink); }
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-line);
}
@media (hover: hover) and (pointer: fine) {
  a { transition: text-decoration-color var(--dur-fast) var(--ease-out); }
  a:hover { text-decoration-color: var(--link-hover); }
}
:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-in);
}
/* the photographs, gallery pictures and videos have a thin frame (an outline) whose rule is more
   specific than the one above; the focus ring wins over it here (2026-11-14, the check of the preview) */
:is(.photos a, .gallery a, .art-video video, .clip video):focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: 3px;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: 5;
  top: var(--s2);
  left: var(--s3);
  padding: var(--s1) var(--s2);
  background: var(--ground);
  transform: translateY(-400%);
}
.skip:focus { transform: none; }

/* His name, wherever it stands on the site, is set on the bed colour. */
.me {
  padding: 0.05em 0.3em;
  border-radius: var(--radius-in);
  background: var(--bed);
  color: var(--on-bed);
  font-weight: var(--wght-strong);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------------------------------------------------------------
   3. The page, its one rule (the left bank) and the menu
   --------------------------------------------------------------- */
.page {
  position: relative;
  max-width: 112rem;
  margin-inline: auto;
}
.page::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--bank);
  width: var(--stroke);
  background: var(--rule);
  pointer-events: none;
}

/* The menu is the same on every page: his name (the way home), then the eleven pages.
   Its rules are in section 12, at the end of this file. */

/* ---------------------------------------------------------------
   4. The river: the hero of the home page (src/scripts/hero-river.js) and
      the band of the other pages (src/scripts/river-band.js). The water of
      these two is the only thing on the site that moves by itself
   --------------------------------------------------------------- */
/* The box shows a still picture of the scene (public/hero/still-*.webp, by theme and width);
   hero-river.js draws the land, his name as stone and the weir once and the moving water every
   frame on the canvas above it. The canvas shows only once the script has drawn it (class is-live). */
.river-art {
  position: relative;
  aspect-ratio: 16 / 5.75;              /* 18% lower than 16 / 7 (the owner's words of 14 November 2026); the
                                           cut is land above and below, the name and the weir stay whole */
  max-height: 64vh;
  overflow: hidden;
  border-radius: var(--radius-hero);
  background-color: var(--ground);
  background-image: url("/hero/still-day.webp");
  background-size: cover;
  background-position: calc(var(--river-focus-x) * 100%) 50%;
}
:root[data-theme="dark"] .river-art { background-image: url("/hero/still-night.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .river-art { background-image: url("/hero/still-night.webp"); }
}
.river-art > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-live) var(--ease-live);
}
.river-art.is-live > canvas { opacity: 1; }

@media (max-width: 40rem) {
  .river-art {
    --river-focus-x: 1;                  /* a phone shows the frame from the first letter to the weir */
    aspect-ratio: 16 / 9;                /* 10% lower than 16 / 10; the whole frame shows */
    max-height: none;
    background-image: url("/hero/still-day-small.webp");
  }
  :root[data-theme="dark"] .river-art { background-image: url("/hero/still-night-small.webp"); }
}
@media (max-width: 40rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .river-art { background-image: url("/hero/still-night-small.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .river-art > canvas { transition: none; }
}

/* the band: a narrow reach of the same river under the menu of every page but the home page
   (RiverBand.astro). It starts at the left bank of the page and ends at the right margin of the content.
   The box shows a still picture (public/band/still-day.webp or still-night.webp, by theme), as high as the
   box and from its left end; src/scripts/river-band.js draws the same picture on the canvas with moving
   water. The canvas shows only once the script has drawn it (class is-live). river-band.js needs the two
   file names as they are: it fetches the picture of the other theme by exchanging "-day." and "-night.". */
/* the band and its pause button (the owner's choice of 2026-11-14): the button stands at the right end of
   the band, in the middle of its height; the margins of the band are those of its wrapper */
.band-wrap {
  position: relative;
  margin-inline: calc(var(--bank) + var(--stroke)) var(--s3);
}
.band-wrap > .flow-btn {
  top: calc(50% - var(--hit) / 2);
  right: var(--s1);
  bottom: auto;
}
.band {
  position: relative;
  height: var(--band-h);
  overflow: hidden;
  background-color: var(--water);
  background-image: url("/band/still-day.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
:root[data-theme="dark"] .band { background-image: url("/band/still-night.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .band { background-image: url("/band/still-night.webp"); }
}
.band > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-live) var(--ease-live);
}
.band.is-live > canvas { opacity: 1; }
/* after the rule above, so that it wins: no fade of the band under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .band > canvas { transition: none; }
}
@media (min-width: 62rem) {
  .band-wrap { margin-inline-end: var(--bank); }
}

/* ---------------------------------------------------------------
   5. Home: the river inside the left bank, with the one button that
      pauses and resumes the water on the picture itself (the owner's
      words of 14 November 2026), then the lead sentence
   --------------------------------------------------------------- */
/* the picture and its button; the margins are those of the page */
.hero {
  position: relative;
  margin-inline: calc(var(--bank) + var(--stroke)) var(--bank);
}
/* on a short window the cap of 64vh makes the picture narrower than the page; the box narrows with
   it, so the button stays on the picture (2026-11-14, the check of the preview) */
@media not all and (max-width: 40rem) {
  .hero { max-width: calc(64vh * 16 / 5.75); }
}
/* the one control: pause and resume. The target is 44 px; the disc that shows is a little smaller */
.flow-btn {
  position: absolute;
  right: var(--s1);
  bottom: var(--s1);
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.flow-btn[hidden] { display: none; }
/* the disc has an ink edge with a thin halo of the ground colour, so that it stands out from light and
   dark parts of the picture alike (WCAG 1.4.11; 2026-11-14, the check of the band button) */
.flow-btn > span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-round);
  background: var(--flow-disc);
  box-shadow: 0 0 0 var(--stroke) var(--ground);
}
.flow-btn svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}
.flow-btn .icon-play,
.flow-btn[data-state="paused"] .icon-pause { display: none; }
.flow-btn[data-state="paused"] .icon-play { display: block; }
.flow-btn:focus-visible { outline: none; }
/* the focus ring lies on a band of the ground colour, so that it reads over water of its own colour */
.flow-btn:focus-visible > span {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring);
  box-shadow: 0 0 0 calc(var(--ring) * 3) var(--ground);
}
@media (hover: hover) and (pointer: fine) {
  .flow-btn > span { transition: background-color var(--dur-fast); }
  .flow-btn:hover > span { background: var(--ground); }
}

@media (max-width: 40rem) {
  .flow-btn { right: 0; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-btn > span { transition: none; }
}

.statement {
  max-width: 27em;
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  text-wrap: balance;
}
@media (pointer: coarse) {
  .masthead a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* ---------------------------------------------------------------
   6. A reach: the title of the page on the bank, its content in the water
   --------------------------------------------------------------- */
.reach { padding: var(--s5) var(--s3) var(--s5) calc(var(--bank) + var(--tick)); }
.lede { padding-top: var(--s3); }
.reach.home-about { padding-top: 0; }
.station { margin-bottom: var(--s3); }
.station h1,
.station h2 { position: relative; font-size: var(--size-title); overflow-wrap: break-word; }
.station h1::before,
.station h2::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: calc(-1 * var(--tick));
  width: calc(var(--tick) - var(--s1));
  height: var(--stroke);
  background: var(--rule);
}
@media (min-width: 62rem) {
  .reach {
    display: grid;
    grid-template-columns: var(--bank) minmax(0, 4fr) minmax(0, 10fr) var(--bank);
    padding-inline: 0;
  }
  .reach > .station {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0 var(--s3) 0 var(--tick);
  }
  .reach > .water,
  .reach > .statement { grid-column: 3; grid-row: 1; }
  /* the home page: the lead sentence and the text under it start at the left of the station column */
  .reach.lede > .statement,
  .reach.home-about > .water { grid-column: 2 / 4; padding-inline-start: var(--tick); }
  .reach.lede > .statement { max-width: calc(27em + var(--tick)); }
  .station h1,
  .station h2 { position: sticky; top: var(--s3); }
}

.water h2 { font-size: var(--size-head); }
.water h3 { font-size: var(--size-text); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s2); }

/* ---------------------------------------------------------------
   7. Records: a date or a label on the left, the entry on the right
   --------------------------------------------------------------- */
/* Under 48rem the date stands above its entry. From 48rem the rows of one list share one date
   column (subgrid), as wide as the longest date of that list and never narrower than
   --col-when, and no date or period breaks across two lines (the owner's words of
   14 November 2026). */
.rows { display: grid; gap: var(--s4); max-width: 52rem; }
.rows > li,
.rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--s3);
}
.when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rows > div > dd + dd { margin-top: var(--s1); }
@media (min-width: 48rem) {
  .rows { grid-template-columns: minmax(var(--col-when), max-content) minmax(0, 1fr); column-gap: var(--s3); }
  .rows > li,
  .rows > div {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
  .rows .when { white-space: nowrap; }
  /* a definition list (DefinitionList): every dd of a row stands in the right column */
  .rows > div > dd { grid-column: 2; }
}
.entry-title { font-weight: var(--wght-strong); line-height: var(--lh-title); }
.byline {
  margin-top: var(--s1);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
  line-height: var(--lh-loose);
}
.venue {
  color: var(--ink-2);
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
}
.entry-text { margin-top: var(--s1); }
/* A record text may print a full address (https://doi.org/...) as a link, on the Software page and
   on a project page; on a phone it may break anywhere, so that it never widens the page. */
.entry-text a { overflow-wrap: anywhere; }
/* The logo of the organisation of a record (Logo.astro, the owner's words of 14 November 2026): at
   most --logo-h high and --logo-w wide, on the page ground by day and on a light plate by night.
   Under 48rem it stands above the text of its record. From 48rem the logos of a list stand in a
   column of their own between the date and the texts (div.has-logo), so the texts of the list stay
   in line, also beside a record without a logo; a record is at least as high as a logo. */
.logo {
  display: flex;
  width: fit-content;
  padding: var(--logo-pad);
  border-radius: var(--radius-in);
  background: var(--logo-plate);
}
.logo img { max-height: var(--logo-h); max-width: var(--logo-w); }
.has-logo > .logo { margin-bottom: var(--s1); }
@media (min-width: 48rem) {
  .has-logo {
    position: relative;
    min-height: calc(var(--logo-h) + 2 * var(--logo-pad));
    padding-inline-start: calc(var(--logo-w) + 2 * var(--logo-pad) + var(--s3));
  }
  .has-logo > .logo { position: absolute; top: 0; left: 0; margin: 0; }
}
/* a shorter list (RecordList and DefinitionList with tight), and titled groups of records */
.rows.tight { gap: var(--s2); }
.group + .group { margin-top: var(--s5); }
.group > h2 + .rows,
.group > h3 + .rows,
.group > h2 + .group { margin-top: var(--s3); }
.intro { max-width: var(--measure); margin-bottom: var(--s4); color: var(--ink-2); }
.meta {
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
}

/* ---------------------------------------------------------------
   8. About
   --------------------------------------------------------------- */
.about { display: grid; gap: var(--s4); }
@media (min-width: 40rem) {
  .about { grid-template-columns: minmax(0, 15rem) minmax(0, var(--measure)); align-items: start; }
}
.portrait {
  width: 100%;
  max-width: 15rem;
  border-radius: var(--radius-out);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
}
.path { margin-top: var(--s5); }
.path .rows { margin-top: var(--s3); gap: var(--s2); }

/* ---------------------------------------------------------------
   9. Projects
   --------------------------------------------------------------- */
.project + .project { margin-top: var(--s6); }
.project > * + * { margin-top: var(--s3); }
.project > h2 + .meta { margin-top: var(--s1); }
.project > p { max-width: var(--measure); }
.plate { max-width: 56rem; }
.plate img { width: 100%; border-radius: var(--radius-out); }
.plate figcaption,
caption {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
  text-align: left;
}
.plate figcaption { margin-top: var(--s2); }
.table-wrap { max-width: 46rem; overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
  font-variant-numeric: tabular-nums;
}
caption { caption-side: top; padding-bottom: var(--s2); }
th, td {
  padding: var(--s1) var(--s2) var(--s1) 0;
  border-bottom: var(--stroke) solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
  font-weight: var(--wght-text);
}
thead th { border-bottom-color: var(--rule); font-weight: var(--wght-strong); }
.num { padding-right: var(--s3); text-align: right; }
/* the parts Fieldwork and Laboratory after the years of the Projects page (2026-11-14) */
.fieldwork,
.laboratory { margin-top: var(--s5); }
/* Their photographs, and the rows of photographs of Talks and Teaching (PhotoRow.astro,
   2026-11-14), keep their whole picture. The grow and the basis of each are in proportion to
   its shape (upright 4 to 5, the others 3 to 2), so the photographs of one row have one height
   and their captions start on one line (grow 8 to 15, basis 12rem to 22.5rem; the grow factors
   are at least 1, so that a photograph alone on a row fills it). In Fieldwork a click opens the
   large copy in a new tab; in a row of PhotoRow.astro it opens the pop-up viewer (viewer.css). */
.photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s3);
  max-width: 56rem;
}
.photos figure { flex: 15 1 22.5rem; min-width: 0; }
.photos figure.is-tall { flex: 8 1 12rem; }
.photos a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-out);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
  background: var(--wash);
}
.photos img { width: 100%; height: auto; }
/* A row of PhotoRow.astro (div.photos.is-row) stays small: from 48rem its photographs share one
   line and shrink together, so they keep one height; on a phone the line is a strip that scrolls
   sideways, each photograph 11.25rem high (9rem wide upright, 16.875rem wide at 3 to 2), so that
   the list of the part follows close under it. */
.photos.is-row { flex-wrap: nowrap; }
@media (max-width: 47.99rem) {
  .photos.is-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s2);
  }
  .photos.is-row figure { flex: 0 0 16.875rem; scroll-snap-align: start; }
  .photos.is-row figure.is-tall { flex-basis: 9rem; }
}
/* a row under the heading of a part, before the list of the part */
.group > h2 + .photos { margin-top: var(--s3); }
.group > .photos ~ .rows { margin-top: var(--s4); }
.photos figcaption {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
}
@media (hover: hover) and (pointer: fine) {
  .photos a { transition: outline-color var(--dur-fast) var(--ease-out); }
  .photos a:hover { outline-color: var(--link-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .photos a { transition: none; }
}
.slot {
  max-width: var(--measure);
  padding: var(--s4) var(--s3);
  border: var(--stroke) dashed var(--rule);
  border-radius: var(--radius-out);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------
   10. Contact, and the footer of every page
   --------------------------------------------------------------- */
.mail { font-size: var(--size-mail); overflow-wrap: anywhere; }
.contact .rows { margin-top: var(--s4); gap: var(--s2); }
.contact .rows a { overflow-wrap: anywhere; }
/* The sign of a profile service before its name (ContactIcon.astro, 2026-11-14). It takes the
   colour of the label. The label keeps its own height, so that it stays on the first line of a
   long address. */
.contact .when { display: flex; align-items: center; align-self: start; gap: var(--s2); }
/* the logos of his group and department under the affiliation (Logo.astro, 2026-11-14) */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.icon { flex: none; width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* The footer (the owner's words of 2026-11-14): the row of the menu links again, then the
   copyright line. It starts at the rule of the left bank and ends at the right bank. */
.foot {
  margin-inline: var(--bank);
  padding: var(--s4) 0 var(--s4) var(--tick);
  border-top: var(--stroke) solid var(--rule-soft);
  color: var(--ink-2);
  font-size: var(--size-small);
}
.foot-links { display: flex; flex-wrap: wrap; column-gap: var(--s3); }
.foot-links a {
  display: inline-block;
  padding-block: var(--s1);
  text-decoration-color: transparent;
}
.foot-links a:hover,
.foot-links a:focus-visible { color: var(--ink); text-decoration-color: var(--link-hover); }
/* the row of signs of his profiles (2026-11-14): each sign alone, its name hidden text; 44 px targets */
.foot-social { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); margin-inline-start: calc(-1 * var(--s2)); }
.foot-social a {
  display: inline-grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  border-radius: var(--radius-out);
  color: var(--ink-2);
}
.foot-social a:hover,
.foot-social a:focus-visible { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .foot-social a { transition: color var(--dur-fast) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .foot-social a { transition: none; }
}
.copyright { margin-top: var(--s2); }
@media (pointer: coarse) {
  .foot-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* ---------------------------------------------------------------
   11. Publications: the year rail, the year sections and the cards
   --------------------------------------------------------------- */

/* the year rail: a row of years under the title on a phone;
   on a wide screen a list that stays in view on the left bank, one
   tick on the rule of the page for each year */
.year-rail { margin-top: var(--s2); }
.year-rail ul { display: flex; flex-wrap: wrap; column-gap: var(--s3); }
.year-rail a {
  position: relative;
  display: inline-block;
  padding-block: var(--s1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-decoration-line: none;
}
.year-rail a:hover,
.year-rail a:focus-visible { color: var(--ink); text-decoration-line: underline; }
.year-rail a[aria-current] { color: var(--ink); }
@media (min-width: 62rem) {
  .pin { position: sticky; top: var(--s3); }
  .year-rail { margin-top: var(--s4); }
  .year-rail ul { display: block; }
  .year-rail a { display: block; }
  .year-rail a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--tick));
    width: calc(var(--tick) - var(--s1));
    height: var(--stroke);
    background: var(--rule);
  }
  .year-rail a[aria-current]::before { background: var(--current); }
}

/* the journals of his papers before the years (section.venues, the owner's words of 14 November
   2026): a heading like that of a year, a grid of covers, each 3 to 4 with the name of its journal
   under it (a journal without a cover on file shows its name in the frame), then Table 1 of his CV */
.venues { margin-bottom: var(--s5); }
.covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--cover-w), calc(33.33% - var(--s3))), 1fr));
  gap: var(--s4) var(--s3);
  max-width: 56rem;
}
/* the grid of covers: three in a row on a phone, so the table follows soon */
.covers > li { min-width: 0; }
.cover {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--stroke) solid var(--rule-soft);
  border-radius: var(--radius-in);
  background: var(--wash);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.is-type {
  display: flex;
  align-items: flex-end;
  padding: var(--s2);
  color: var(--ink);
  font-size: var(--size-small);
  font-weight: var(--wght-strong);
  font-stretch: var(--wdth-tight);
  line-height: var(--lh-head);
  hyphens: auto;
  overflow-wrap: anywhere;
}
/* a phone: three covers in a row leave the name in the frame about 80 px, so its type is smaller */
@media (max-width: 47.99rem) {
  .cover.is-type { padding: var(--s1); font-size: calc(var(--size-small) * 0.8); }
}
.covers figcaption {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
  line-height: var(--lh-title);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.covers + .table-wrap { margin-top: var(--s5); }
.venues tbody th { font-weight: var(--wght-text); }
.venues tfoot th,
.venues tfoot td { border-bottom: 0; font-weight: var(--wght-strong); }
/* the narrowest phones (up to 360 px): two covers in a row, so that the names break between words;
   up to 384 px a little less room in the journal table, so that it fits without a sideways scroll
   (2026-11-14, the check of the preview) */
@media (max-width: 22.5rem) {
  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 24rem) {
  .venues th,
  .venues td { padding-right: var(--s1); }
  .venues table { font-size: calc(var(--size-small) * 0.92); }
}

/* the years: a heading with the number of papers and a line to the right edge, then the cards */
.years { display: flex; flex-direction: column; gap: var(--s5); }
.year-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.year-head h2 { font-variant-numeric: tabular-nums; }
.year-head::after {
  content: "";
  flex: 1;
  align-self: center;
  height: var(--stroke);
  background: var(--rule-soft);
}

/* the cards: two columns on a phone, up to five in the widest page */
.papers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - var(--s3))), 1fr));
  gap: var(--s4) var(--s3);
}
.papers > li { min-width: 0; }
.card { display: block; text-decoration-line: none; overflow-wrap: break-word; }

/* the first page of the paper: every sheet has one size (3 to 4), the page keeps
   its own proportions inside it, and its white takes the tint --sheet of the theme */
.sheet {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--stroke) solid var(--rule-soft);
  border-radius: var(--radius-in);
  background: var(--sheet);
  isolation: isolate;
}
.sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* a paper without a first page on file: the same sheet, set in type */
.sheet.is-type {
  padding: var(--s2);
  background: var(--wash);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
  line-height: var(--lh-head);
}
.sheet.is-type cite,
.sheet.is-type b { display: block; }
.sheet.is-type b { margin-top: var(--s2); color: var(--ink); font-weight: var(--wght-strong); }
/* a long title stops at a whole line with an ellipsis, never half a line at the foot of the sheet
   (seen at 375 px, 2026-11-14); the full title is printed under the sheet */
.sheet.is-type b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .sheet.is-type b { -webkit-line-clamp: 7; line-clamp: 7; }
}

/* Projects (Card with fit="cover"): wider cards, a 4 to 3 frame that the image fills,
   with no tint; a card that is not a link has no underline under its title */
.papers.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.sheet.is-cover { aspect-ratio: 4 / 3; }
.sheet.is-cover img { object-fit: cover; mix-blend-mode: normal; }
.card.is-still .card-title { text-decoration-line: none; }

.card-title {
  display: block;
  margin-top: var(--s2);
  font-size: var(--size-small);
  font-weight: var(--wght-strong);
  font-stretch: var(--wdth-tight);
  line-height: var(--lh-title);
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-line);
}
.card .venue,
.card .meta { display: block; margin-top: var(--s1); font-stretch: var(--wdth-tight); }
.card:focus-visible .sheet { border-color: var(--focus); }

/* hover and focus change colour only */
@media (hover: hover) and (pointer: fine) {
  .year-rail a { transition: color var(--dur-fast) var(--ease-out); }
  .sheet { transition: border-color var(--dur-fast) var(--ease-out); }
  .card-title { transition: text-decoration-color var(--dur-fast) var(--ease-out); }
  a.card:hover .sheet { border-color: var(--link-hover); }
  a.card:hover .card-title { text-decoration-color: var(--link-hover); }
}
@media (pointer: coarse) {
  .year-rail a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .year-rail a,
  .sheet,
  .card-title { transition: none; }
}

/* ---------------------------------------------------------------
   12. The menu. One row (the owner's words of 14 November 2026,
       which replace arrangement 1 of round 4): his name (the way
       home), then the eleven pages in one list, in one details element,
       which is closed in the HTML. No script is needed.
         under 48rem   his name and a "Menu" control on one line. The
                       control opens the list, one page on a line
         48 to 90rem   no control. The list is a row under his name; it
                       wraps when the screen is too narrow for it. The
                       row shows although the element is closed
                       (::details-content). A browser without that
                       pseudo-element keeps the control, which opens
                       the list as on a phone
         from 90rem    his name, the row and the theme toggle on one
                       line: his name over the titles of the pages, the
                       row ending at the right bank, the toggle in the
                       right margin
       The page that is open has a line under its name. Hover and focus
       change one colour. Nothing here moves and nothing fades.
   --------------------------------------------------------------- */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s2) var(--s3) var(--s2) calc(var(--bank) + var(--tick));
}
.masthead a {
  display: inline-block;
  padding-block: var(--s1);
  border-bottom: var(--ring) solid transparent;
  text-decoration-color: transparent;
  transition: none;
}
.masthead a:hover,
.masthead a:focus-visible { text-decoration-color: var(--link-hover); }
.masthead a[aria-current="page"] { border-bottom-color: var(--current); text-decoration-color: transparent; }
/* his name, about twice the size of the text from 48rem (the owner's words of 14 November 2026) */
.masthead > .home {
  justify-self: start;
  align-self: start;
  font-size: var(--size-name);
  line-height: var(--lh-head);
}
.menu > summary {
  width: fit-content;
  min-height: 2.75rem;
  margin-inline-start: auto;
  padding: calc((2.75rem - var(--lh-text) * 1em) / 2 - var(--stroke)) var(--s2);
  border: var(--stroke) solid var(--ink-2);
  border-radius: var(--radius-out);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .menu > summary:hover { background-color: var(--wash); }
}

/* a finger: every name in the menu is at least 44 px high and wide */
@media (pointer: coarse) {
  .masthead a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  /* the names of the row keep the height of 44 px, but a short name such as "CV" is not widened to
     44 px, so the row stays on one line, lines up at its left and keeps equal gaps; the target
     reaches 3 px into each gap, so "CV" is about 24 px wide to a finger (WCAG 2.5.8; 2026-11-14,
     the check of the preview) */
  .masthead .menu-row a { position: relative; min-width: 0; justify-content: flex-start; }
  .masthead .menu-row a::after { content: ""; position: absolute; inset: 0 -3px; }
}

/* under 48rem: his name and the "Menu" control share one line, and the list opens under them.
   His name, the control and each page of the list are 44 px high: one line of text (1.5em)
   with the same padding above and below it, less the border where there is one. */
@media not all and (min-width: 48rem) {
  .masthead > .home,
  .masthead > .menu { grid-area: 1 / 1; }
  .masthead > .home {
    position: relative;
    z-index: 1;
    min-height: 2.75rem;
    padding-block: calc((2.75rem - var(--lh-text) * 1em) / 2 - var(--ring));
    border-top: var(--ring) solid transparent;
    /* his name keeps clear of the "Menu" control (about 5.3rem wide) and the toggle (2026-11-14,
       the check of round 6): from about 370 px down to about 345 px it is a little smaller, so that
       it stays on one line; on a narrower screen it breaks into two lines instead of running under
       the control */
    font-size: max(var(--size-small), min(var(--size-name), calc(10vw - 1.25rem)));
    max-width: calc(100% - var(--hit) - var(--s2) - 5.5rem);
  }
  .menu-row { padding-top: var(--s2); }
  .masthead .menu-row a {
    position: relative;
    display: block;
    min-height: 2.75rem;
    padding-block: calc((2.75rem - var(--lh-text) * 1em) / 2);
    border-bottom: 0;
  }
  .masthead .menu-row a[aria-current="page"] {
    text-decoration-color: var(--current);
    text-decoration-thickness: var(--ring);
  }
  /* the open list: one tick on the rule of the page for each of its pages, a strong one for the page that is open */
  .menu-row a::before {
    position: absolute;
    top: calc(50% - var(--stroke) / 2);
    left: calc(-1 * var(--tick));
    width: calc(var(--tick) - var(--s1));
    height: var(--stroke);
    background: var(--rule);
  }
  .menu-row:has(a[aria-current="page"]) a::before { content: ""; }
  .menu-row a[aria-current="page"]::before {
    content: "";
    top: calc(50% - var(--ring) / 2);
    height: var(--ring);
    background: var(--current);
  }
}

/* from 48rem: the list is one row in the small size (it wraps when it must). The eleven names
   need about 870 px in Bahnschrift with the gap --s2 (measured 2026-11-14, with Artwork; with the
   gap --s3 they needed about 950 px and broke into two lines at 1024 and 1440 px) */
@media (min-width: 48rem) {
  @supports selector(::details-content) {
    .menu > summary { display: none; }
    .menu::details-content { content-visibility: visible; }
  }
  .menu-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s2);
    font-size: var(--size-small);
  }
}
/* from 48rem to 90rem the row stands under his name; with a scroll bar at 1024 px the gap --s2 left
   "Contact" on a second line, so the gap is 10 px here (2026-11-14, the check of the preview) */
@media (min-width: 48rem) and (max-width: 89.99rem) {
  .menu-row { column-gap: 0.625rem; }
}
@media (min-width: 62rem) {
  .masthead { padding-inline-end: var(--bank); }
}
/* from 90rem: one line. His name starts over the titles of the pages, the row ends at the
   right bank, and the row stands at the middle of the height of his name (a details element
   gives no baseline to align on). Below 90rem the row stands under his name, because beside
   it the row would break into two lines */
@media (min-width: 90rem) {
  .masthead {
    grid-template-columns: var(--bank) auto minmax(0, 1fr) var(--bank);
    align-items: center;
    padding-inline: 0;
  }
  .masthead > .home { align-self: center; }
  .masthead > .home { grid-column: 2; margin-inline-start: var(--tick); }
  .masthead > .menu { grid-column: 3; margin-inline-start: var(--s3); }
  .menu-row { justify-content: flex-end; }
}

/* ---------------------------------------------------------------
   13. Day and night (the owner's words of 14 November 2026).
       theme.js sets data-theme on the html element; color-scheme picks
       the day or the night value of every light-dark() token.
       The toggle stands in the nav after the menu, 44 px square:
         under 48rem   on the line of his name, at the right, beside
                       the "Menu" control
         48 to 90rem   on the line of his name, at the right, over
                       the row of the menu
         from 90rem    in the right margin, on the line of his name
                       and the menu
       It shows the theme that is on: a sun by day, a moon by night.
       A press turns the one into the other (--dur-icon) while the
       page changes theme: a circle that opens from the toggle (View
       Transitions), else a cross-fade of the colours (.theme-fade),
       and no motion at all under prefers-reduced-motion.
   --------------------------------------------------------------- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: var(--stroke) solid transparent;
  border-radius: var(--radius-out);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle { transition: background-color var(--dur-fast) var(--ease-out); }
  .theme-toggle:hover { background-color: var(--wash); }
}
.sun-moon { display: block; overflow: visible; }
.sun-core { fill: currentColor; }
.sun-rays { fill: none; stroke: currentColor; stroke-width: 1.75px; stroke-linecap: round; }
.sun-core,
.sun-rays,
.moon-cut {
  transform-box: view-box;
  transform-origin: 12px 12px;
}
/* the icon moves only after a press (.is-pressed, set by theme.js), never when a page opens */
.is-pressed .sun-core { transition: transform var(--dur-icon) var(--ease-spring); }
.is-pressed .sun-rays { transition: transform var(--dur-icon) var(--ease-out), opacity var(--dur-icon) var(--ease-out); }
.is-pressed .moon-cut { transition: transform var(--dur-icon) var(--ease-theme); }
/* night: the disc grows, the rays turn away and fade, and the shadow slides in to leave a crescent */
:root[data-theme="dark"] .sun-core { transform: scale(1.7); }
:root[data-theme="dark"] .sun-rays { transform: rotate(-90deg) scale(0.5); opacity: 0; }
:root[data-theme="dark"] .moon-cut { transform: translate(-7.5px, 5.5px); }

.masthead > .theme-toggle {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
}
@media not all and (min-width: 48rem) {
  .menu > summary { margin-inline-end: calc(var(--hit) + var(--s2)); }
}
@media (min-width: 48rem) and (not (min-width: 90rem)) {
  .masthead > .home { grid-area: 1 / 1; }
  .masthead > .menu { grid-area: 2 / 1; }
  .masthead > .theme-toggle { align-self: center; }
}
@media (min-width: 90rem) {
  .masthead > .home { grid-row: 1; }
  .masthead > .menu { grid-row: 1; }
  .masthead > .theme-toggle { grid-area: 1 / 4; justify-self: center; align-self: center; }
}

/* the change of theme: the circle replaces the default cross-fade of a view transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
/* without View Transitions: every colour fades to its new value */
:root.theme-fade,
:root.theme-fade *,
:root.theme-fade *::before,
:root.theme-fade *::after {
  transition:
    background-color var(--dur-theme) var(--ease-theme),
    color var(--dur-theme) var(--ease-theme),
    border-color var(--dur-theme) var(--ease-theme),
    outline-color var(--dur-theme) var(--ease-theme),
    text-decoration-color var(--dur-theme) var(--ease-theme),
    fill var(--dur-theme) var(--ease-theme),
    stroke var(--dur-theme) var(--ease-theme);
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .is-pressed .sun-core,
  .is-pressed .sun-rays,
  .is-pressed .moon-cut { transition: none; }
}