/* ==========================================================================
   gulyas.info
   No webfonts, no third-party requests, no JavaScript. Everything the browser
   loads comes from this origin.
   ========================================================================== */

:root {
  /* Colour: cool paper, ink, one deep green accent used sparingly. */
  --paper: #fcfcfa;
  --paper-sunk: #f1f2ee;
  --ink: #16181b;
  --ink-soft: #5a6069;
  --rule: #e0e1dc;
  --accent: #1e5b4c;
  --accent-sunk: #e7efeb;

  /* The one colour that is not a section hue. Sections say where you are;
     this says where to knock, so it stays the same on every page. Declared
     above the [data-section] block on purpose — nothing overrides it. */
  --signal: #a83216;
  --signal-sunk: #f3e7e3;

  /* Type: serif for reading, grotesque for wayfinding, mono for data. */
  --font-text: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --measure: 34rem;
  /* The rail holds a four-digit year on list pages and the small mark beside a
     page title — neither needs more than this. It used to be 6rem, which left
     the text hanging far off the left edge and made the home page's wide
     opening zone look like a different page from the article below it. */
  --rail: 3rem;
  --gap: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161a;
    --paper-sunk: #1c1f24;
    --ink: #e9e9e4;
    --ink-soft: #9aa1aa;
    --rule: #2c3037;
    --accent: #79b9a5;
    --accent-sunk: #1b2a27;
    --signal: #ef7a4a;
    --signal-sunk: #33221c;
  }
}

/* --------------------------------------------------------------------------
   Section hues

   Each section owns one colour, carried by its page title, year rail, link
   chips and active nav item, so the reader can tell where they are without
   reading the menu. The hues share a lightness and saturation range so they
   read as one set; every one of them clears 6.5:1 against the page. Body
   text never takes a hue — only wayfinding does.
   -------------------------------------------------------------------------- */

[data-section="work"]     { --accent: #1d4e6f; --accent-sunk: #e6ebec; }
[data-section="projects"] { --accent: #8a3f26; --accent-sunk: #f1e9e5; }
[data-section="papers"]   { --accent: #5b2f56; --accent-sunk: #ece8ea; }
[data-section="talks"]    { --accent: #7a5518; --accent-sunk: #efebe3; --talk-map-high: #eddfc4; --talk-map-medium: #dae6df; --talk-map-low: #dee5ef; --talk-map-dot: #b83f43; }
[data-section="writing"]  { --accent: #1c5560; --accent-sunk: #e6ebeb; }
[data-section="press"]    { --accent: #7b2f3a; --accent-sunk: #efe8e7; }
[data-section="contact"]  { --accent: #5c4636; --accent-sunk: #edeae6; }

/* The archive is older and in another language, so it stays deliberately
   quieter than the current sections. */
[data-section="blog"]     { --accent: #454e59; --accent-sunk: #eaebea; }

@media (prefers-color-scheme: dark) {
  [data-section="work"]     { --accent: #7fb2d4; --accent-sunk: #232c34; }
  [data-section="projects"] { --accent: #e0937a; --accent-sunk: #312827; }
  [data-section="papers"]   { --accent: #c294b8; --accent-sunk: #2c2830; }
  [data-section="talks"]    { --accent: #d4b06a; --accent-sunk: #2f2c25; --talk-map-high: #5b4930; --talk-map-medium: #314940; --talk-map-low: #354355; --talk-map-dot: #e47b7e; }
  [data-section="writing"]  { --accent: #82bcc7; --accent-sunk: #232d32; }
  [data-section="press"]    { --accent: #e0919b; --accent-sunk: #31272c; }
  [data-section="contact"]  { --accent: #c2a68d; --accent-sunk: #2b2723; }
  [data-section="blog"]     { --accent: #9aa1aa; --accent-sunk: #27292e; }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-underline-offset: 0.18em;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--rail) + var(--gap) + 3rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--accent);
  color: var(--paper);
  padding: 0.5rem 0.75rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* A thin bar of the section's hue across the top of every page — the one
   place the colour is stated outright rather than implied. */
body::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--accent);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-block: 1.4rem;
  position: relative;
  /* Keeps the row clear of the section portrait, which is out of the flow and
     would otherwise be painted over the end of the menu — the contact mark
     first, since it closes the row. The portrait is positioned against the
     padding box, so this reserves space without moving it. Dropped again below
     44rem, where the portrait is hidden anyway. */
  padding-right: calc(1.5rem + 7.75rem);
}

/* The section portrait stands on the masthead's bottom rule. It stays out of
   the flex flow, which wraps the wordmark and menu onto two rows and would
   otherwise push the portrait onto a third. */
.masthead-avatar {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  display: block;
  width: 7.75rem;
  height: 6.65rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.masthead-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

/* The laptop takes up much of the writing portrait, so this variant is framed
   more tightly from the top and lets the masthead crop the lower edge. */
.masthead-avatar-write img {
  position: relative;
  left: 50%;
  width: 120%;
  height: 120%;
  max-width: none;
  transform: translateX(-50%);
  object-position: center top;
}

.wordmark {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wordmark-name {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.wordmark-suffix {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The language switch stands just past the suffix, in the same quiet register
   as the name. The wrapper is rendered even with nothing in it: its auto margin
   is what sends the menu to the right-hand side of the wordmark row, and an
   untranslated page must sit exactly where a translated one does. */
.masthead-marks {
  margin-right: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  /* Pulls back most of the masthead's 2rem column gap, which is sized to
     separate the wordmark from the menu. The switch belongs to the name, so
     it hugs the suffix instead. */
  margin-left: -1.45rem;
}

/* The contact mark carries --signal rather than the section hue: it means the
   same thing on every page. */
.contact-mark {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 4px;
  color: var(--signal);
}

.contact-mark svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-mark:hover {
  background: var(--signal-sunk);
}

.contact-mark:focus-visible {
  outline-color: var(--signal);
}

/* The language switch is deliberately colourless: mono letters in the same
   quiet register as the Ph.D. suffix beside it, with a chip border to say it
   is a control. It must not take the section hue — that hue means "this is
   the section you are in", and the switch means the same thing everywhere. */
.lang-switch {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.12rem 0.34rem;
}

.lang-switch:hover {
  color: var(--paper);
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

/* Menu toggle: pure CSS, the checkbox is the state. */

.menu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.menu-button {
  display: none;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}

.menu-button span,
.menu-button span::before,
.menu-button span::after {
  display: block;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
}

.menu-button span {
  position: relative;
}

.menu-button span::before,
.menu-button span::after {
  content: "";
  position: absolute;
}

.menu-button span::before {
  top: -5px;
}

.menu-button span::after {
  top: 5px;
}

.nav-list,
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  /* Tight enough that the whole menu, contact mark included, still fits on one
     line beside the reserved portrait column. */
  gap: 0.9rem;
}

/* The portrait is decorative and comes later in the source, so it would paint
   over the end of the menu wherever the two ever meet — the contact mark
   first. The reserved column above keeps them apart; this makes sure that a
   wrapped second line or a wider font can never hide a destination. */
.nav {
  position: relative;
  z-index: 1;
}

.nav-item {
  position: relative;
}

.nav-item > a,
.nav-group {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.nav-item > a:hover,
.nav-item:hover > .nav-group {
  color: var(--ink);
}

.nav-item > a[aria-current] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-sub {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 12rem;
  padding: 0.6rem 0;
  margin-top: 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 20;
}

.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub {
  opacity: 1;
  visibility: visible;
}

.nav-sub a {
  display: block;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav-sub a:hover,
.nav-sub a[aria-current] {
  color: var(--ink);
  background: var(--accent-sunk);
}

/* The contact mark keeps --signal at the end of the menu — the grey of the nav
   labels and the section hue both say something it does not mean, so it holds
   its own colour in every state, hover and current included. Listed after the
   nav rules so it wins on order, not on stacked selectors. */
.nav-item-contact > a,
.nav-item-contact > a:hover,
.nav-item-contact > a[aria-current] {
  color: var(--signal);
}

/* Nudges the glyph onto the cap line of the uppercase labels beside it: the
   flex box aligns on its own baseline, and an icon has none. */
.nav-item-contact > a {
  transform: translateY(0.15rem);
}

/* Pulls back the chip's own padding, so the space after the last label reads as
   the same 1.4rem gap the labels keep between themselves. */
.nav-item-contact {
  margin-left: -0.25rem;
}

/* Off-screen on the wide layout, where the mark is a chip beside the labels.
   The collapsed menu shows it — see the narrow-screen block. */
.contact-mark-label {
  position: absolute;
  left: -9999px;
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

main {
  padding-block: 3.5rem 4.5rem;
}

.prose {
  max-width: var(--measure);
  margin-left: calc(var(--rail) + var(--gap));
}

.prose > *:first-child {
  margin-top: 0;
}

.prose h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1.8rem;
  position: relative;
}

/* A small, asymmetric data mark gives the title a foothold in the rail
   without using the familiar horizontal-line treatment. */
.prose h1::before {
  content: "";
  position: absolute;
  top: 0.3em;
  right: calc(100% + 1.65rem);
  width: 0.95rem;
  height: 0.95rem;
  background:
    linear-gradient(var(--accent) 0 0) left top / 0.36rem 0.36rem no-repeat,
    linear-gradient(var(--accent) 0 0) right top / 0.36rem 0.36rem no-repeat,
    linear-gradient(var(--accent) 0 0) right bottom / 0.36rem 0.36rem no-repeat;
}

.prose h2 {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 2.75rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.prose h3 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2rem 0 0.6rem;
}

.prose p,
.prose ul,
.prose ol,
.prose dl {
  margin: 0 0 1.1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.2rem;
}

.prose li {
  margin-bottom: 0.35rem;
}

.prose .compact-links {
  margin: 0 0 1.1rem;
}

.prose .compact-links summary {
  color: var(--accent);
  cursor: pointer;
}

.prose .compact-links[open] summary {
  margin-bottom: 0.75rem;
}

.prose .compact-links ul {
  columns: 2 15rem;
  column-gap: 1.5rem;
  margin-bottom: 0;
  font-size: 0.94em;
  line-height: 1.45;
}

.prose .compact-links li {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}

.prose img {
  max-width: 100%;
  height: auto;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-sunk);
  padding: 0.1em 0.35em;
}

.prose pre {
  background: var(--paper-sunk);
  padding: 1rem;
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* --------------------------------------------------------------------------
   Home page

   The one page that opens wider than the measure — but only at the top. The
   hero, the figures and the line of places reach back across the rail, so the
   first screen states a position instead of starting a text. Everything below
   that returns to the reading column and stays there: one step in the left
   edge, not one per section. The numbered rails inside those blocks are
   narrower than the page rail for the same reason.
   -------------------------------------------------------------------------- */

/* Scoped to .prose so it outranks the paragraph and list margins there —
   `.prose p { margin: 0 0 1.1rem }` is a shorthand, and it would otherwise put
   the left margin back and leave only the hero hanging into the rail. */
.prose .home-wide {
  margin-left: calc(-1 * (var(--rail) + var(--gap)));
  width: calc(100% + var(--rail) + var(--gap));
}

.home-hero {
  max-width: 38rem;
  margin-bottom: 2.5rem;
}

/* The eyebrow does what the rail mark does on every other page: it gives the
   title a foothold and names the section before the sentence starts. The mark
   itself would land outside the page, since the hero reaches into the rail. */
.prose .home-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.prose .home-hero h1 {
  font-size: 2.35rem;
  margin-bottom: 1.2rem;
}

.prose .home-hero h1::before {
  content: none;
}

.prose .home-lead {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* Three figures on one hairline band. Mono, because every number on this site
   is mono, and in the hue because they are the page's evidence.

   Scoped to .prose like the blocks below it: `.prose ul` is a shorthand and
   outranks a bare class, so an unscoped rule loses its bottom margin and the
   band's rule ends up sitting on the line of places underneath. */
.prose .home-figures {
  list-style: none;
  margin-block: 0 3rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.prose .home-figures li {
  margin: 0;
  padding-left: 0;
}

.prose .home-figures li::before {
  content: none;
}

.home-figure-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.home-figure-label {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Featured work borrows the year rail from the list pages, so the home page
   and /projects/ read as the same site. No guide line: three rows do not need
   one, and it would promise a list that is not there. */
.prose .home-works {
  list-style: none;
  margin-block: 0 1rem;
  padding: 0;
}

.prose .home-works > li {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0 0 1.6rem;
  padding-left: 0;
}

.prose .home-works > li::before {
  content: none;
}

/* The year holds the rail for the whole row; the title and the line beside it
   flow into the second column on their own. */
.prose .home-work-year {
  margin: 0;
}

.home-work-year {
  grid-column: 1;
  white-space: nowrap;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-align: right;
  padding-top: 0.2rem;
}

.prose .home-work-title {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 0.25rem;
}

.prose .home-work-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Two ways out of the hero: the work, or a conversation. Same mono register as
   the link chips under a list entry, one size up, and only the first one is
   filled — a page with two equally loud buttons has no primary action. */
.home-cta {
  margin-top: 1.6rem;
}

/* Markdown wraps the two links in a paragraph of their own, so the row lives
   on whichever of the two elements actually holds them. */
.home-cta,
.prose .home-cta p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0;
}

/* An anchor into the page has to clear the sticky masthead. */
[data-section="home"] .prose h2 {
  scroll-margin-top: 7rem;
}

.home-cta a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-sunk);
}

.home-cta a:first-child {
  background: var(--accent);
  color: var(--paper);
}

.home-cta a:hover {
  background: var(--accent);
  color: var(--paper);
}

/* Where the work was done. Names, not logos: no third-party requests, and a
   row of borrowed brand marks would say less than the four words do. */
.prose .home-affil {
  margin-block: -1.5rem 3rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.home-affil-names {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Four capabilities, two by two. The ordinal is the only hue in the block —
   the text stays ink, because body text never takes a colour here. */
.prose .home-cards {
  list-style: none;
  margin-block: 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.6rem;
}

.prose .home-cards > li {
  margin: 0;
  padding: 0 0 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
}

.prose .home-cards > li::before {
  content: none;
}

.prose .home-card-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.prose .home-card-title {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.3rem;
}

.prose .home-card-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Three fields of expertise, given the weight of the featured entries on the
   list pages: the hue at full strength on the left edge and its quietest tint
   behind the text. Equal in every way — same panel, same type, no ordinals —
   because none of the three outranks the others. The negative margins cancel
   the padding so the text still lines up with the column above. */
.prose .home-expertise {
  list-style: none;
  margin-block: 0 1rem;
  padding: 0;
}

.prose .home-expertise > li {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem 1rem;
  margin-left: calc(-1rem - 3px);
  margin-right: -1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-sunk);
}

.prose .home-expertise > li::before {
  content: none;
}

.prose .home-expertise .home-card-note {
  color: var(--ink);
}

/* The working method is a sequence, so it takes the rail instead of a grid:
   the step number stands where the year stands on every list page. */
.prose .home-steps {
  list-style: none;
  margin-block: 0 1rem;
  padding: 0;
}

.prose .home-steps > li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0 0 1.3rem;
  padding-left: 0;
}

.prose .home-steps > li::before {
  content: none;
}

.prose .home-step-n {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-align: right;
  padding-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Entry lists: publications, talks, press, projects
   -------------------------------------------------------------------------- */

.entries {
  margin-top: 3rem;
}

.entry-group {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  column-gap: var(--gap);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 2rem;
  position: relative;
}

/* Guide line: the year rail gets a vertical rule in the section's hue,
   running the height of the group. It is the one long stroke of colour on
   the page, and it is doing structural work — tying a year to its entries. */
.entry-group::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 0;
  left: calc(var(--rail) + 0.75rem);
  width: 2px;
  background: var(--accent);
  opacity: 0.28;
}

.entry-group-label {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-align: right;
  position: sticky;
  top: 1.5rem;
}

.entry-list {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  margin-bottom: 1.9rem;
}

.entry:last-child {
  margin-bottom: 0.5rem;
}

/* A sub-entry belonging to the item above it — e.g. a study that appeared
   as a chapter in a book already listed as its own entry. */
.entry-indent {
  margin-left: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}

.entry-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

/* A featured entry gets the hue at full strength: a solid left edge and a
   tinted block. The negative margin cancels the padding so the text still
   lines up with every other entry in the column. */
.entry-featured {
  border-left: 3px solid var(--accent);
  background: var(--accent-sunk);
  padding: 0.9rem 1rem 1rem;
  margin-left: calc(-1rem - 3px);
  margin-right: -1rem;
}

.entry-featured .entry-title::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.5rem;
  vertical-align: 0.15em;
  background: var(--accent);
  border-radius: 50%;
}

/* On a featured entry the note carries the reason it matters, so it reads as
   text rather than as a footnote. */
.entry-featured .entry-note {
  color: var(--ink);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Sub-entries: studies that belong under the volume above them. */
.entry-indent {
  margin-left: 1.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

/* How long the work ran. Mono, like every other number on the site, and
   deliberately without a hue: the year rail two columns to the left is the
   coloured element saying when it started, and this only closes the span. */
.entry-span {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.entry-authors,
.entry-venue,
.entry-note {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.entry-venue {
  font-style: italic;
}

.entry-note {
  font-size: 0.87rem;
  margin-top: 0.4rem;
}

.entry-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
}

.entry-links a {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--accent);
  background: var(--accent-sunk);
}

/* Filled on hover — the one moment the hue goes to full strength. */
.entry-links a:hover {
  background: var(--accent);
  color: var(--paper);
}

/* Optional disclosure under an entry. Native <details>, so no JavaScript. */
.entry-details {
  margin-top: 0.7rem;
}

.entry-details > summary {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-sunk);
  cursor: pointer;
  list-style: none;
}

.entry-details > summary::-webkit-details-marker {
  display: none;
}

.entry-details > summary::before {
  content: "+ ";
}

.entry-details[open] > summary::before {
  content: "– ";
}

.entry-details > summary:hover {
  background: var(--accent);
  color: var(--paper);
}

.entry-details > p {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Talk archive: facet filters and repeated appearances
   -------------------------------------------------------------------------- */

.talk-map {
  max-width: var(--measure);
  margin: 2rem auto 0;
  padding: 1.1rem 0 1.25rem;
  border-block: 1px solid var(--rule);
}

.talk-map-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.talk-map-heading h2 {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 1rem;
}

.talk-map-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.talk-map-layout {
  display: block;
}

.talk-map-visual {
  position: relative;
  min-width: 0;
}

.talk-map-graphic {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.talk-map-inset {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 7.2rem;
  padding: 0.3rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.talk-map-inset > span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.talk-map-inset svg {
  display: block;
  width: 100%;
  height: auto;
}

.talk-map-country {
  fill: var(--paper-sunk);
  stroke: var(--rule);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

.talk-map-country.is-visited {
  cursor: pointer;
}

.talk-map-country.is-visited.is-high {
  fill: var(--talk-map-high);
}

.talk-map-country.is-visited.is-medium {
  fill: var(--talk-map-medium);
}

.talk-map-country.is-visited.is-low {
  fill: var(--talk-map-low);
}

.talk-map-country.is-visited:hover,
.talk-map-country.is-visited.is-selected {
  fill: var(--accent);
}

.talk-map-country.is-visited:focus-visible {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.talk-map-country.is-visited:focus {
  outline: none;
}

.talk-map-city circle {
  fill: var(--talk-map-dot);
  stroke: var(--paper);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.talk-map-city.is-selected circle {
  stroke: var(--ink);
  stroke-width: 2;
}

.talk-map-meta {
  min-width: 0;
  font-family: var(--font-ui);
}

.talk-map-detail {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.talk-map-country-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.talk-map-country-list button {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  width: 100%;
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}

.talk-map-country-list button:hover,
.talk-map-country-list button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.talk-map-country-list strong {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.talk-filters {
  max-width: var(--measure);
  margin: 2rem auto 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
}

.talk-filter-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.talk-filter-field {
  display: grid;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.talk-filter-field select {
  min-width: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
}

.talk-filter-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
}

.talk-filter-options label {
  white-space: nowrap;
}

.talk-filter-options input {
  accent-color: var(--accent);
}

.talk-filter-reset {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

.talk-filter-reset:hover,
.talk-filter-reset:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.talk-filter-count {
  margin: 0 0 0 auto;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.talk-filter-empty {
  max-width: var(--measure);
  margin: 1.5rem auto -1rem;
  color: var(--ink-soft);
  text-align: center;
}

/* The browser's built-in [hidden] rule is otherwise overridden by the grid
   display on an entry group, leaving empty years behind after filtering. */
.entry-group[hidden],
.talk-card[hidden] {
  display: none !important;
}

@media (min-width: 70rem) {
  .talk-filters {
    position: fixed;
    left: calc(50% - (var(--measure) + var(--rail) + var(--gap) + 3rem) / 2 - 0.75rem);
    top: 50%;
    z-index: 25;
    width: 10.5rem;
    max-height: calc(100vh - 8rem);
    margin: 0;
    overflow-y: auto;
    transform: translate(-100%, -50%);
  }

  .talk-filter-fields {
    grid-template-columns: 1fr;
  }

  .talk-filter-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .talk-filter-count {
    margin: 0.25rem 0 0;
  }
}

.talk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.65rem;
}

.talk-tag {
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.talk-occurrences {
  margin-top: 0.7rem;
}

.talk-occurrences > summary {
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.talk-occurrences > ol {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.talk-occurrences > ol > li {
  padding: 0.75rem 0 0.1rem 1rem;
  border-left: 1px solid var(--rule);
}

.talk-occurrence-title {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Supervised theses: a quieter, smaller-scale block — year label, then the
   results as small tiles, two to a row, so the archive doesn't read as a
   long list of full-width paragraphs. */
.thesis-archive {
  margin-top: 1rem;
  font-size: 0.82rem;
}

.thesis-note {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}

.thesis-year-block {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.thesis-year-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.thesis-year-block + .thesis-year-block {
  margin-top: 0.9rem;
}

.thesis-year {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.thesis-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.thesis-tile {
  padding: 0.65rem 0.8rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.thesis-degree {
  display: inline-block;
  margin-right: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.thesis-tile a {
  font-size: 0.9em;
}

/* Press portrait. The background is cut out, so it sits straight on the
   paper — no frame needed. */
.prose img.portrait {
  display: block;
  max-width: 17rem;
  height: auto;
  margin: 1.5rem 0;
}

/* --------------------------------------------------------------------------
   Work page

   The five fields of work, side by side. Quiet panels rather than the home
   page's hairline cards, because each one carries a piece of evidence at the
   bottom and needs a floor to sit on. The evidence is an .entry-links chip —
   the same mark a list entry's links wear, so a proof reads as a proof
   everywhere on the site. The hue lives in that chip alone; the card's own
   text stays ink.
   -------------------------------------------------------------------------- */

.prose .work-cards {
  list-style: none;
  margin-block: 0 1.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}

.prose .work-cards > li {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  display: flex;
  flex-direction: column;
}

/* The evidence sits on the floor of the card, centred: the cards are equal
   height, so a row of chips at the same line reads as one row of proof rather
   than as five loose links ending wherever the text happens to stop. */
.prose .work-cards .entry-links {
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  justify-content: center;
}

.prose .work-cards .entry-links li {
  margin-bottom: 0;
}

/* Five cards in two columns leave a half-empty last row, so the fifth one
   takes the whole width instead of ending the block on a ragged edge. */
.prose .work-cards > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* An h3 for the outline, but not in the h3 register: these are titles, not
   the small uppercase labels the prose uses elsewhere. */
.prose .work-card-title {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.prose .work-card-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Featured filter

   A floating switch that narrows the list to the featured entries. The
   checkbox holds the state and the label is the button, so this works with
   JavaScript switched off. Year groups left with nothing to show are hidden
   too, otherwise the rail would carry empty years.
   -------------------------------------------------------------------------- */

.filter-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The switch floats level with the list it filters. It is anchored by its
   right edge just outside the text column — the rail is 3rem now, too narrow
   to hold a control without covering the year numbers — and it widens
   leftwards into the margin. Below 62rem there is no margin left to widen
   into, and it drops to the bottom-left corner instead. */
.filter-button {
  position: fixed;
  right: calc(50% + (var(--measure) + var(--rail) + var(--gap) + 3rem) / 2 + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.filter-caption {
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.filter-button:hover .filter-caption,
.filter-toggle:checked + .filter-button .filter-caption {
  color: var(--accent);
}

.filter-button:hover,
.filter-toggle:focus-visible + .filter-button {
  border-color: var(--accent);
}

/* The switch itself: a track with a knob that slides across when checked. */
.filter-switch {
  display: block;
  position: relative;
  width: 1.55rem;
  height: 0.85rem;
  border-radius: 0.85rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.filter-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.275rem;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: transform 0.12s ease, background 0.12s ease;
}

.filter-toggle:checked + .filter-button .filter-switch {
  background: var(--accent);
  border-color: var(--accent);
}

.filter-toggle:checked + .filter-button .filter-switch::after {
  transform: translateX(0.68rem);
  background: var(--paper);
}

/* Both counts stay visible; the active side is the one in full colour. */
.filter-counts {
  display: block;
  letter-spacing: 0.02em;
}

.filter-n {
  color: var(--ink-soft);
}

.filter-slash {
  color: var(--ink-soft);
  opacity: 0.55;
  margin: 0 0.1rem;
}

.filter-n-all {
  color: var(--accent);
  font-weight: 700;
}

.filter-toggle:checked + .filter-button .filter-n-all {
  color: var(--ink-soft);
  font-weight: 400;
}

.filter-toggle:checked + .filter-button .filter-n-few {
  color: var(--accent);
  font-weight: 700;
}

.filter-toggle:checked ~ .entries .entry:not(.entry-featured) {
  display: none;
}

.filter-toggle:checked ~ .entries .entry-group:not(:has(.entry-featured)) {
  display: none;
}

/* On the research archive the year rail doubles as an index. It is placed
   directly below the featured switch, so jumping through a long bibliography
   does not require returning to the top of the page. */
.research-year-jump {
  position: fixed;
  right: calc(50% + (var(--measure) + var(--rail) + var(--gap) + 3rem) / 2 + 0.75rem);
  top: calc(50% + 3.65rem);
  z-index: 30;
  width: 2.7rem;
  max-height: calc(50vh - 4rem);
  overflow-y: auto;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

.research-year-jump-caption {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.research-year-jump ol {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-year-jump a {
  color: var(--ink-soft);
  text-decoration: none;
}

.research-year-jump a:hover,
.research-year-jump a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The index is derived from the same data as the cards. When the featured
   filter is on, years without a featured paper recede instead of suggesting
   an empty destination. */
.filter-toggle:checked + .filter-button + .research-year-jump .research-year-jump-no-featured a {
  color: var(--ink-soft);
  opacity: 0.35;
}

.filter-toggle:checked + .filter-button + .research-year-jump li:not(.research-year-jump-no-featured) a {
  color: var(--accent);
  font-weight: 700;
}

/* Anchor targets must clear the sticky two-line masthead. */
.research-year {
  scroll-margin-top: 7rem;
}

/* The floating controls need a margin wide enough to stand in. Below this the
   window has none left, so they move to the bottom-left corner — the same
   place they take on a phone. */
@media (max-width: 62rem) {
  .filter-button {
    right: auto;
    left: 1.25rem;
    top: auto;
    bottom: 1.25rem;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
  }

  .research-year-jump {
    right: auto;
    left: 1.25rem;
    top: auto;
    bottom: 4.1rem;
    max-height: 44vh;
  }
}

/* Below this width the rail folds above the content, so the switch has no
   column to sit in and moves to the bottom-left corner. */
@media (max-width: 44rem) {
  /* The menu collapses here, so the masthead has no spare right-hand side. */
  .masthead-avatar {
    display: none;
  }

  /* With the portrait gone there is nothing left to reserve space for, so the
     row goes back to the wrap's own padding. Left standing, the reserved column
     would hold the hamburger 148px clear of the right edge and wrap the
     wordmark onto a second line on a phone. */
  .masthead-inner {
    padding-right: 1.5rem;
  }

  /* The negative margin exists to pull the switch up against the Ph.D. suffix
     on one line. Once the row is narrow enough that it wraps onto a line of its
     own, that same margin hangs it past the left edge of the page. */
  .masthead-marks {
    margin-left: 0;
  }

}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 1.6rem 2.5rem;
}

.colophon-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Icon links have no text baseline to align to, so centre the two blocks. */
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.colophon-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

/* Same size and stroke as the masthead contact mark, but in the footer's
   quiet ink — the signal red belongs to the contact mark alone. */
.colophon-mark {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 4px;
  color: var(--ink-soft);
}

.colophon-mark svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.colophon-mark img {
  width: 1.05rem;
  height: 1.05rem;
}

.colophon-mark:hover {
  color: var(--accent);
}

.colophon-links a,
.colophon-legal {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.colophon-legal {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  z-index: 40;
}

.back-to-top:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

@media (max-width: 30rem) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.05rem;
  }
}

/* --------------------------------------------------------------------------
   Narrow screens: the rail collapses, the menu folds
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .prose {
    margin-left: 0;
  }

  .prose h1::before {
    display: none;
  }

  /* No rail to reach back into, so the home page blocks stop reaching. The
     hero stacks, the portrait keeps a sane size instead of filling the width,
     and the year steps above its entry the way the list pages do. */
  .prose .home-wide {
    margin-left: 0;
    width: 100%;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .prose .home-figures {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .prose .home-works > li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.3rem;
  }

  .home-work-year {
    grid-row: auto;
    text-align: left;
    padding-top: 0;
  }

  .prose .home-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .prose .home-steps > li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.3rem;
  }

  .prose .home-step-n {
    grid-row: auto;
    text-align: left;
    padding-top: 0;
  }

  .entry-group {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  /* The rail collapses into the single column, so the guide line has
     nothing left to separate the year from — drop it. */
  .entry-group::before {
    display: none;
  }

  .entry-group-label {
    grid-column: 1;
    text-align: left;
    position: static;
  }

  .entry-list {
    grid-column: 1;
  }

  .talk-filters {
    margin-top: 1.5rem;
  }

  .talk-map {
    display: none;
  }

  .talk-filter-fields {
    grid-template-columns: 1fr;
  }

  .talk-filter-count {
    flex-basis: 100%;
    margin-left: 0;
  }

  .menu-button {
    display: inline-flex;
  }

  .nav {
    flex-basis: 100%;
    display: none;
  }

  .menu-toggle:checked ~ .nav {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.75rem;
  }

  .nav-item > a,
  .nav-group {
    display: block;
    padding: 0.45rem 0;
  }

  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    border: 0;
    margin: 0;
    padding: 0 0 0.3rem 1rem;
    min-width: 0;
    background: none;
  }

  .nav-sub a {
    padding: 0.35rem 0;
  }

  /* In the collapsed menu the mark is one row among words, so it takes its
     label: a lone envelope in a column of destinations names nothing. The chip
     padding it was pulling back is gone here, so the row lines up with the
     labels above it instead of hanging a few pixels left of them. */
  .nav-item-contact {
    margin-left: 0;
  }

  .nav-item-contact > a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0;
    transform: none;
  }

  .contact-mark-label {
    position: static;
    left: auto;
    color: var(--ink-soft);
  }

  .nav-item-contact > a:hover .contact-mark-label,
  .nav-item-contact > a[aria-current] .contact-mark-label {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }

}

@media print {
  .masthead,
  .colophon,
  .skip,
  .back-to-top {
    display: none;
  }

  .prose,
  .entry-group {
    margin-left: 0;
    grid-template-columns: 1fr;
  }
}