/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2022 Schwartzco Inc.
        License: 2212-IGFRZR     
*/

/* ==========================================================================
   maximilianvierlboeck.com: the one stylesheet of the site.

   It replicates the rendering of the former WordPress site (Astra theme,
   Elementor, WPForms). The values were measured on the live site at 22
   viewport widths; odd numbers (e.g. 60.12px) are the old theme's em values
   resolved at 18px and are kept so the layout stays identical.

   Desktop-first: base rules describe the widest layout and max-width media
   queries mirror the old breakpoints:
     544px   Astra mobile          (type sizes, gutters)
     600px   WPForms               (contact inputs full width)
     767px   Elementor mobile      (content gaps, design values columns)
     921px   Astra tablet          (body 16px, type sizes, card padding; the hamburger menu below 922px)
     1024px  Elementor tablet      (home and design values insets)
     1200px  Astra container       (card padding)

   Sections:
     1. Fonts            5. Header and navigation    9.  Animations
     2. Tokens           6. Intro text (home, 404)   10. Reduced motion
     3. Base             7. Text pages
     4. Layout shell     8. Contact
   ========================================================================== */


/* ==========================================================================
   1. Fonts (self-hosted Graphik, see the license comment above)
   Only the six faces the pages use. A page downloads a face only if it uses it.
   ========================================================================== */

@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-Light-Web.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

/* The variable font renders all regular (400) upright text, as it did on
   WordPress. "normal" instead of 400 keeps the face registered identically. */
@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-Upright-VF-Web.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-RegularItalic-Web.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-Medium-Web.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-Semibold-Web.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Graphik Web";
  src: url("../fonts/Graphik-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}


/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  --color-text: #1c1c1e;
  --color-accent: #3070b3;              /* link hover/focus, current mobile menu item */
  --color-background: #ffffff;
  --color-muted: #767676;               /* copyright; #868686 before (contrast decision) */
  --color-rule: rgba(8, 63, 135, 0.05); /* footer top rule */
  --color-divider: #dddddd;
  --color-button: #f5f5f5;              /* grey pill button */
  --color-button-hover: #eaeaea;
  --font-family: "Graphik Web", sans-serif;
}


/* ==========================================================================
   3. Base
   ========================================================================== */

html {
  box-sizing: border-box;
  font-size: 112.5%;                    /* 1rem = 18px */
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar's space on every page. Without it, short pages (404)
     have no scrollbar where long pages do, so the centred layout jumps sideways. */
  scrollbar-gutter: stable;
}

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

body {
  position: relative;
  margin: 0;
  overflow-x: hidden;                   /* on body only, as before: the page keeps scrolling on the viewport */
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 1rem;                      /* 18px */
  font-weight: 400;
  /* A length, not a factor: it is computed once (30.6px) and inherited as px,
     exactly like the old theme, so smaller text keeps the body line height. */
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-text);
}

/* Tag defaults as on WordPress. A .heading-N class gives a heading of another
   level the same look, so heading levels can be correct without changing it. */
h1, .heading-1 { font-size: 3rem; font-weight: 400; line-height: 1.4em; }
h2, .heading-2 { font-size: 2.3333333333333rem; font-weight: 300; line-height: 1.3em; }
h3, .heading-3 { font-size: 2rem; font-weight: 400; line-height: 1.3em; }
h4, .heading-4 { font-size: 1.3888888888889rem; font-weight: 500; line-height: 1.2em; }
h5, .heading-5 { font-size: 1.1111111111111rem; font-weight: 600; line-height: 1.2em; }
h6, .heading-6 { font-size: 0.83333333333333rem; font-weight: 500; line-height: 1.25em; }

p { margin: 0 0 1.75em; }
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
strong { font-weight: 600; }
b { font-weight: 700; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0; }

a {
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s linear;
}

a:hover,
a:focus {
  color: var(--color-accent);
}

/* As on WordPress: dotted outline on focus (also after a click), hidden while
   hovered, always shown for keyboard focus. */
a:focus { outline: thin dotted; }
a:hover { outline: 0; }
a:focus-visible { outline: thin dotted; }

/* Hidden visually, still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 921px) {
  body { font-size: 0.88888888888889rem; }               /* 16px, lines 27.2px */
  h1, .heading-1 { font-size: 45px; }
  h2, .heading-2 { font-size: 32px; }
  h3, .heading-3 { font-size: 26px; }
  h4, .heading-4 { font-size: 1.2222222222222rem; }      /* 22px */
  h5, .heading-5 { font-size: 1rem; }                    /* 18px */
}

@media (max-width: 544px) {
  h1, .heading-1 { font-size: 32px; }
  h2, .heading-2 { font-size: 28px; }
  h3, .heading-3 { font-size: 22px; }
  h4, .heading-4,
  h5, .heading-5 { font-size: 1.1111111111111rem; }      /* 20px, larger than at 545-921 as before */
}


/* ==========================================================================
   4. Layout shell: skip link, main area with its card, footer
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  overflow-wrap: normal;
}

.skip-link:focus {
  left: 5px;
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip: auto;
  border-radius: 2px;
  background-color: #f1f1f1;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  color: #21759b;
  font-size: 0.875rem;                  /* 15.75px */
  line-height: normal;
  text-decoration: none;
}

/* The 20px + 4em gap below the header lives here; the header has no margin. */
.site-main {
  max-width: 1240px;                    /* content max 1200px */
  margin: 0 auto;
  padding: calc(20px + 4em) 20px 4em;   /* 92/72px (>= 922), 84/64px (<= 921) */
}

.page-card {
  padding: 5.34em 6.67em;               /* 96.12px 120.06px */
  overflow-wrap: break-word;
}

/* The old page builder's 10px column inset (not on the 404 page). */
.page-card__body {
  padding: 10px;
}

.site-footer {
  margin: 0 45px;
  padding: 20px 0;
  border-top: 1px solid var(--color-rule);
}

.site-footer__row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 1200px;
  min-height: 80px;
  margin: 0 auto;
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-muted);
  text-align: center;
}

@media (max-width: 1200px) {
  .page-card { padding: 3.34em 2.4em; }                    /* 60.12px 43.2px */
}

@media (max-width: 921px) {
  .page-card { padding: 1.5em 2.14em; }                    /* 24px 34.24px */
  .site-footer { margin: 0 70px; }                         /* old theme: 45px margin + 25px padding */
  .site-footer__copyright { margin-bottom: 10px; }         /* sits 5px above centre, as before */
}

@media (max-width: 544px) {
  .site-main { padding-right: 0.54em; padding-left: 0.54em; }   /* 8.64px */
  .page-card { padding: 1.5em 1em; }                       /* 24px 16px */
  .site-footer { margin: 0 15px; }
}


/* ==========================================================================
   5. Header and navigation
   Two menus: .site-nav (desktop) and .mobile-nav (a hamburger that opens a panel sliding
   in from the right; a popover, so it needs no JavaScript). Only one of them is
   displayed at any width.
   ========================================================================== */

.site-header {
  --title-size: 1.5555555555556rem;     /* 28px; the mobile menu's links are always as large */
  position: relative;                   /* containing block of the menu toggle */
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;                    /* content 1200px */
  margin: 0 auto;
  padding: 0 20px;
  transition: padding 0.2s linear;      /* glides with the name when the layout switches at 544px */
}

.site-header__title {
  /* One bar height (141.6px) from 545px up: the old site's wide-layout height. Its narrow
     layout shrank this padding to 16px (1em of the 16px body), a bar 4px shorter, and the
     name and the hamburger jumped up 2px when the menu switched. Keeping 18px (1rem)
     means nothing moves, and the name, the menu and the hamburger stay as far from the
     top edge as they are on wide pages. The name sits 3px further right than on the old
     site (39px instead of 36px): its first letter is then as far from the left edge as
     from the top edge (61px each, measured on rendered pixels from 545px to 1240px). */
  margin: 36px 0 36px 39px;
  padding: 1rem 0;                      /* 18px */
  font-size: var(--title-size);
  line-height: 1;
  /* margin-right is not in this list: a glide would keep the name's box narrow while the desktop
     menu is already showing at 922px, so the name and the links wrap for a moment. */
  transition: margin-top 0.2s linear, margin-bottom 0.2s linear, margin-left 0.2s linear, padding 0.2s linear;
}

.site-header__title-link {
  line-height: 1.2;
}

.site-header__title-link:hover,
.site-header__title-link:focus {
  color: var(--color-text);             /* the title never turns blue */
}

/* The right margin is 29px (36px on the old site): the last item's text is then 67px from
   the right edge, a little more than the 66px it is from the top, the same rule as the name
   at the top left. The hamburger below is placed differently: its lines end where the page
   content and its grey lines end (64px from the edge, 35px on phones). */
.site-nav__list {
  display: flex;
  margin: 0 29px 0 12px;
  list-style: none;
}

.site-nav__link {
  --underline-inset: 18px;              /* the text, without the padding on each side */
  --underline-bottom: 3.5px;            /* about 6px below the baseline, clear of descenders */
  position: relative;
  display: block;
  padding: 0 18px;
  font-size: 1rem;                      /* 18px */
  line-height: 2em;                     /* 36px */
}

/* Both menus draw a 1px line under the link on hover and keyboard focus, from left to
   right in 0.25s, and take it back the same way when the pointer leaves. The text keeps
   its colour. (The old site turned the desktop items blue and enlarged them by 20%.)
   The timing is the one of the Steve Jobs Archive's footer links, which Max liked. */
.site-nav__link::after,
.mobile-nav__link::after {
  content: "";
  position: absolute;
  bottom: var(--underline-bottom);
  left: var(--underline-inset);
  width: 0;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: all 0.25s ease;
}

.site-nav__link:hover,
.site-nav__link:focus,
.mobile-nav__link:hover,
.mobile-nav__link:focus {
  color: var(--color-text);             /* no blue; the base link rule would turn it blue */
}

.site-nav__link:focus-visible::after,
.mobile-nav__link:focus-visible::after {
  width: calc(100% - 2 * var(--underline-inset));
  opacity: 1;
}

/* Hover only where a pointer can hover. A touch screen applies :hover when a link is tapped and
   leaves the page straight away, so the line was drawn halfway and cut off. */
@media (any-hover: hover) {
  .site-nav__link:hover::after,
  .mobile-nav__link:hover::after {
    width: calc(100% - 2 * var(--underline-inset));
    opacity: 1;
  }
}

.mobile-nav {
  display: none;
}

/* Both buttons sit at the same spot, placed by hand per breakpoint at (bar height - button
   height) / 2, because they cannot centre themselves: the sheet's x takes the hamburger's place.
   They have no :focus style of their own: the browser's focus ring shows for keyboard use only.
   (The old dotted border added on :focus grew the box and pushed the icon 1px left, until the
   next click elsewhere.) */
.mobile-nav__toggle,
.mobile-nav__close {
  position: absolute;
  top: var(--toggle-top);
  right: var(--toggle-right);
  padding: var(--toggle-padding);
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

/* The hamburger is centred on the bar at every width, so it follows the bar's height while the
   header changes size. The sheet's x keeps the hand-placed --toggle-top. */
.mobile-nav__toggle {
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.2s linear;
}

.mobile-nav__icon {
  display: block;
}

/* Two lines that turn into an x. The sheet's own button carries the same two lines as the
   hamburger beneath it and rotates them while the white fades in, so the icon seems to change
   in place; closing turns it back. 4px is half the distance between the two lines. */
.mobile-nav__line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.mobile-nav__panel:popover-open .mobile-nav__line {
  transition: transform 0.5s cubic-bezier(0.32, 0.08, 0.24, 1) 0.05s;
}

.mobile-nav__panel:popover-open .mobile-nav__line--top {
  transform: translateY(4px) rotate(45deg);
}

.mobile-nav__panel:popover-open .mobile-nav__line--bottom {
  transform: translateY(-4px) rotate(-45deg);
}

/* Every @starting-style block in this section must come after the rules it overrides: it takes
   part in the cascade in source order, and if a normal rule follows it, that rule wins and
   nothing animates on opening. */
@starting-style {
  .mobile-nav__panel:popover-open .mobile-nav__line {
    transform: none;
  }
}

/* The header's own hamburger follows the sheet: behind the white it turns into an x once the
   sheet covers it (hence the delay), and turns back the moment the sheet is gone. Without this,
   a browser that cannot animate a popover leaving would show the x being replaced by the
   hamburger: Safari has no overlay property (see below), so there the sheet disappears at once. */
.mobile-nav:has(.mobile-nav__panel:popover-open) .mobile-nav__toggle .mobile-nav__line {
  transition-delay: 0.5s;
}

.mobile-nav:has(.mobile-nav__panel:popover-open) .mobile-nav__toggle .mobile-nav__line--top {
  transform: translateY(4px) rotate(45deg);
}

.mobile-nav:has(.mobile-nav__panel:popover-open) .mobile-nav__toggle .mobile-nav__line--bottom {
  transform: translateY(-4px) rotate(-45deg);
}

/* A popover: HTML opens it (the hamburger) and closes it (the x, or Esc); in the top layer it
   needs no z-index. It covers the whole screen in white, so the page behind needs no dimming
   and there is no "outside" to tap. Opening: the white fades in while it unfolds downward from
   the top edge, and the links follow one after another once it is there. Closing is quicker
   (but in Safari the sheet just disappears: leaving needs the overlay property, which only
   Chromium has). The sheet carries a copy of the header bar, so the name stays where it is when
   the sheet covers the header. */
.mobile-nav__panel {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--title-size);         /* the links inherit it: always as large as the site name */
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s ease,
    overlay 0.55s allow-discrete,
    display 0.55s allow-discrete;
}

.mobile-nav__panel:popover-open {
  opacity: 1;
  clip-path: inset(0);
  transition:
    clip-path 0.6s cubic-bezier(0.32, 0.08, 0.24, 1),
    opacity 0.4s ease,
    overlay 0.6s allow-discrete,
    display 0.6s allow-discrete;
}

@starting-style {
  .mobile-nav__panel:popover-open {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

/* The links start where the page content starts (set per breakpoint below; the name is a
   little further left: 58px, 30px on phones). */
.mobile-nav__list {
  margin: 0;
  padding: 0 20px 44px;
  list-style: none;
}

.mobile-nav__list li:nth-child(1) { --i: 0; }
.mobile-nav__list li:nth-child(2) { --i: 1; }
.mobile-nav__list li:nth-child(3) { --i: 2; }
.mobile-nav__list li:nth-child(4) { --i: 3; }

.mobile-nav__link {
  --underline-inset: 0px;
  --underline-bottom: 0.25em;           /* clear of descenders */
  position: relative;
  display: block;
  width: fit-content;                   /* the line is as wide as the text */
  padding: 0.45em 0;
  font-weight: 300;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-nav__panel:popover-open .mobile-nav__link {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.32, 0.08, 0.24, 1);
  transition-delay: calc(var(--i) * 60ms + 360ms);
}

@starting-style {
  .mobile-nav__panel:popover-open .mobile-nav__link {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.mobile-nav__link[aria-current="page"] {
  color: var(--color-accent);
}

@media (max-width: 921px) {
  /* Below 922px the hamburger replaces the desktop menu. (The old theme switched at 921.99px,
     which Chromium also matches at exactly 922px; from 922px the desktop menu shows here.) */
  .site-nav { display: none; }

  .mobile-nav {
    display: block;
    --toggle-top: 49.8px;               /* (141.6px bar - 42px) / 2 */
    --toggle-right: 50.74px;            /* its lines end where the page content and its grey lines end: 64.24px from the edge */
    --toggle-padding: 12px;
  }

  .site-header__title {
    margin-right: 134px;                /* 20px gap + 36px + 42px toggle + 36px */
  }

  .mobile-nav__list {
    padding-left: 64.2px;               /* where the page content starts */
  }

  body:has(.mobile-nav__panel:popover-open) {
    overflow: hidden;                   /* the page behind does not scroll */
  }
}

@media (max-width: 544px) {
  .site-header {
    --title-size: 1.2222222222222rem;   /* 22px */
  }

  .site-header__bar {
    padding: 20px;
  }

  .site-header__title {
    margin: 10px 72px 10px 10px;        /* right: 20px gap + 42px toggle + 10px */
    padding: 0.88888888888889rem 0;     /* 16px: the bar stays 118.4px on phones */
  }

  .mobile-nav {
    --toggle-top: 38.2px;               /* (118.4px bar - 42px) / 2 */
    --toggle-right: 21.14px;            /* its lines end where the page content ends: 34.64px from the edge */
  }

  .mobile-nav__list {
    padding-left: 34.6px;               /* where the page content starts */
    padding-bottom: 36px;
  }
}

/* At 347px and below the title wraps onto two lines; the bar is 144.8px high. */
@media (max-width: 347px) {
  .mobile-nav {
    --toggle-top: 51.4px;               /* (144.8px bar - 42px) / 2 */
  }
}

/* Browsers from before 2024 do not know popovers: the hamburger would do nothing and the sheet
   would stay hidden. They show the links in the page, below the header. */
@supports not selector(:popover-open) {
  .mobile-nav__toggle,
  .mobile-nav__close,
  .mobile-nav__bar {
    display: none;
  }

  .mobile-nav__panel {
    position: static;
    height: auto;
    opacity: 1;
    clip-path: none;
  }

  .mobile-nav__link {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   6. Intro text (home and 404)
   ========================================================================== */

/* The homepage's large light intro (its h1). --intro-gap is the white space
   under it: the old 40px gap plus the spacer (150px, 75px on phones). The right
   margin is the old 100px inset. */
.page-intro {
  --intro-gap: 190px;
  margin: 0 100px var(--intro-gap) 0;
  font-size: 2.3333333333333rem;        /* 42px */
  font-weight: 300;
  line-height: 1.5em;                   /* 63px */
}

@media (max-width: 1024px) {
  .page-intro { margin-right: 0; }
}

@media (max-width: 921px) {
  .page-intro { font-size: 32px; }      /* 48px lines */
}

@media (max-width: 767px) {
  .page-intro { --intro-gap: 115px; }   /* 40px + 75px spacer */
}

@media (max-width: 544px) {
  .page-intro { font-size: 28px; }      /* 42px lines */
}

/* 404: the homepage's spacing, but centred, in the regular weight and at the size
   of the old 404 title (30px at every width). Balanced lines when it wraps, so no
   single word is left on its own. It sits after the rules above so it wins at
   every width.

   Equal white space above and below the text, as the eye sees it: from the
   header's letters to the heading's letters, and from the heading's letters to the
   footer rule. Three things make equal boxes look unequal, so the text moves down
   by half of their sum (the total height stays the same):
   - --header-gap: the header's own white space under its text box;
   - 20px: .site-main has that much more padding above the card than below it;
   - --optical-offset: the header's letters end above their box, and the heading's
     letters sit unevenly in their line box. Measured on rendered pixels: equal
     boxes looked top-heavy by 13px on desktop, 11px on tablets, 6px on phones. */
.page-intro--404 {
  --header-gap: 52.8px;
  --optical-offset: 9px;
  --shift: calc((var(--intro-gap) - var(--header-gap) - 20px - var(--optical-offset)) / 2);
  margin: var(--shift) 0 calc(var(--intro-gap) - var(--shift));
  font-size: 1.6666666666667rem;        /* 30px */
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 921px) {
  .page-intro--404 { --header-gap: 54.6px; --optical-offset: 6px; }
}

@media (max-width: 544px) {
  .page-intro--404 { --header-gap: 46.4px; }
}

/* ==========================================================================
   7. Text pages: publications, design values, portfolio
   ========================================================================== */

.divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
}

/* --- Publications --------------------------------------------------------- */

/* Every white space under the title is equal as the eye sees it: from the first line
   to the heading, from each entry to the next line, and from each line to the next
   heading (the space between the title and the first line may be larger). The boxes
   are 75px apart (55px on phones; the old site had 83.8px above and 70px below the
   later lines), plus --optical on desktop: a heading has more room above its capital
   letters than a paragraph has below its last line, which made the space above a
   line 2.7px smaller than below it. Measured on the letters with
   tools/check_dividers.mjs.
   flow-root keeps the divider's margin inside the section, so the section's id (an
   old in-page anchor) is still the scroll target, 15px above the line (35px for the
   first). Above a later line the last paragraph's 1.6em margin already counts
   towards the 75px, so the section adds the rest. */
.pub-section {
  --optical: 2.7px;
  display: flow-root;
  margin-top: calc(60px - 1.6em + var(--optical));   /* + 15px divider margin + 1.6em paragraph margin = 75px */
}

.pub-section--first {
  margin-top: 40px;                     /* after the h1 there is no paragraph margin: 40px + 35px = 75px */
}

.pub-section .divider {
  margin: 15px 0 75px;
}

.pub-section--first .divider {
  margin-top: 35px;
  border-top-color: #dddddddd;          /* the first divider was 87% opaque */
}

.pub-section h2 {
  margin-bottom: 40px;
}

.pub-section p {
  margin: 0 10px 1.6em 0;
}

.pub-section a {
  text-decoration: underline;
}

/* An inline font-size: 1rem left in the old content: 18px at every width. */
.text-root-size {
  font-size: 1rem;
}

@media (max-width: 921px) {
  .pub-section { --optical: 0px; }      /* smaller type: the gaps are already equal */
}

@media (max-width: 544px) {
  .pub-section { --optical: -0.9px; }   /* phone type sizes: the space above a line was 0.9px larger */
}

@media (max-width: 767px) {
  .pub-section { margin-top: calc(40px - 1.6em + var(--optical)); }   /* + 15px + 1.6em = 55px */
  .pub-section--first { margin-top: 20px; }          /* 20px + 35px = 55px */
  .pub-section .divider { margin-bottom: 55px; }
  .pub-section h2 { margin-bottom: 20px; }
}

/* --- Design values -------------------------------------------------------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 90px;                     /* 50px spacer + 40px gap */
}

.value__title {
  margin-bottom: 10px;
}

.value__text {
  margin: 0 10px 50px 0;
  text-align: justify;
}

.value--left .value__text {
  margin-right: 40px;
}

.values-quote {
  margin: 90px 0 0;
  text-align: center;
}

.values-quote__text {
  margin: 0;
}

.values-quote__text p,
.values-quote__author {
  margin: 0 0 1.6em;
}

@media (max-width: 1024px) {
  .value__text,
  .value--left .value__text {
    margin-right: 30px;
  }
}

/* Only at 768-1024px the old page had 10px more below this one heading. */
@media (min-width: 768px) and (max-width: 1024px) {
  .value__title--extra-gap {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .values-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 70px;
  }

  .value__text,
  .value--left .value__text {
    margin-right: 5px;
  }

  .values-quote {
    margin: 70px 25px 0;
  }
}

/* --- Portfolio ------------------------------------------------------------ */

.portfolio-section {
  display: flow-root;
  margin-top: 20px;
}

.portfolio-section .divider {
  margin: 55px 0 75px;
}

.portfolio-section--second .divider {
  margin-top: 35px;
}

.portfolio-section h2,
.portfolio-section__image-slot,
.item-title {
  margin-bottom: 40px;
}

/* The blank line the two missing images left on the old page. */
.portfolio-section__image-slot {
  height: 1lh;
}

.item-title {
  text-align: center;
}

.portfolio-section p {
  margin: 0 0 1.6em;
  line-height: 1.2em;
}


/* ==========================================================================
   8. Contact
   ========================================================================== */

/* The address replaces the old form (the form's own styles are in the git history): a grey
   pill that opens the mail program (the old Send button's look and colours) and the address
   as plain text below it, so anybody without a mail program can still select and copy it.

   --title-gap is the space between the title and the pill, the same as between the title and
   the first entry on the other pages. --contact-gap is that same white space as the eye sees
   it, from the letters of the title to the pill (the space under the letters is added): the
   address block uses it to reach "Other Websites". A text box has white space above and below
   its letters, so the em value below takes that off (measured on rendered pixels). The footer
   line is as far away as on Publications and Design Values: the page keeps the shared padding
   and .social-links adds the white space those pages have under their last paragraph. */
.page-card--contact {
  --title-gap: 80px;
  --contact-gap: calc(var(--title-gap) + 16px);   /* 16px: the white space under the title's letters */
  --text-under: 0.33em;                 /* white space under the address's letters (its own em) */
}

.page-card--contact h1 {
  margin-bottom: var(--title-gap);
}

.contact-email {
  margin: 0;
  font-style: normal;                   /* <address> is italic by default */
  text-align: center;
  overflow-wrap: anywhere;              /* only a very narrow window ever needs this */
}

.contact-email__button {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid var(--color-button);
  border-radius: 60px;
  background-color: var(--color-button);
  color: var(--color-text);
  font-size: 1.2222222222222rem;        /* 22px */
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact-email__button:hover,
.contact-email__button:focus {
  color: var(--color-text);             /* no blue; the base link rule would turn it blue */
}

.contact-email__button:focus-visible {
  border-color: var(--color-button-hover);
  background-color: var(--color-button-hover);
  outline: 1px dotted var(--color-accent);
  outline-offset: 2px;
}

/* Not on a touch screen, where :hover would stay on after a tap. */
@media (any-hover: hover) {
  .contact-email__button:hover {
    border-color: var(--color-button-hover);
    background-color: var(--color-button-hover);
  }
}

/* 5.8px: the white space above the letters of the "Other Websites" heading. */
.contact-email__text {
  margin: 22px 0 calc(var(--contact-gap) - var(--text-under) - 5.8px);
}

/* The white space under the last paragraph on Publications and Design Values: 2.5em in all
   (1.75em margin plus the space under the letters), less the 10px of padding the card body
   already adds. With the shared padding, the footer line is then 213px away (1440px wide),
   176px (922 to 1200px) or 128px (below), as on those pages. */
.social-links {
  margin-bottom: calc(2.5em - 10px);
}

/* The white space above the heading comes from the address block; the bottom padding is the
   old distance to the icons. */
.social-links__title {
  margin: 0;
  padding: 0 0 6.6px;
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
}

.social-links__list {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;                   /* the same corner as the form fields (the old site: 10%, 5px) */
  text-decoration: none;
  transition: none;                     /* opacity switches instantly, as before */
}

.social-links__link--linkedin { background-color: #0077b5; }
.social-links__link--orcid { background-color: #aecd54; }
.social-links__link--google { background-color: #5383ec; }

/* The link colour only drives the focus outline from the base link rules. */
.social-links__link:hover {
  color: #ffffff;
  opacity: 0.9;
}

.social-links__icon {
  display: block;
  color: #ffffff;
}

@media (max-width: 921px) {
  .page-card--contact { --contact-gap: calc(var(--title-gap) + 13px); --text-under: 0.265em; }
  .social-links__title { padding: 0 0 4.4px; }
}

@media (max-width: 767px) {
  .page-card--contact { --title-gap: 60px; }
}

@media (max-width: 544px) {
  .page-card--contact { --contact-gap: calc(var(--title-gap) + 11px); }
  .contact-email__button { padding: 12px 30px; font-size: 1rem; }

  /* On phones the white space under the icons equals the white space above the page title (from
     the site title to "Contact": 180px as seen), so the page is symmetrical. Up to 460px wide
     the next rule overrides it.
     98px = what the shared padding already gives (10px card body + 24px card + 64px main). */
  .social-links { margin-bottom: calc(180px - 98px); }
}

/* On an iPhone the copyright sat behind Safari's floating bar on this page, but not once the page
   was as tall as the home page (Max, on the device). Up to 460px wide the white space under the
   icons is therefore 270px, 1.5 times the 180px above the page title (the home page-height
   version, 316px, was more than needed). 98px = what the shared padding already gives. */
@media (max-width: 460px) {
  .social-links { margin-bottom: calc(270px - 98px); }
}


/* ==========================================================================
   9. Animations (only when the visitor has not asked for reduced motion)
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Entrance animations play on load. The old site started each one when it
     scrolled into view; pure CSS cannot do that in every browser yet. */
  .fade-in { animation: fade-in 1.25s ease; }
  .fade-in--fast { animation-duration: 0.75s; }
  .fade-in--slow { animation-duration: 2s; }

  .social-links__link {
    transition: transform 0.3s;
  }

  .social-links__link:hover,
  .social-links__link:focus,
  .social-links__link:active {
    transform: scale(1.1);
  }
}


/* ==========================================================================
   10. Reduced motion: no animations (above), every transition instant
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* As the old page builder did; one rule so no component can forget it. The menu's
     underline then appears at once instead of being drawn, and the mobile menu's sheet
     appears and disappears without fading or unfolding. */
  html * {
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}