/* ---------------------------------------------------------------------------
   Adam Harvey — site styling on top of the stock Zensical theme.

   Ported from the Hugo site's assets/_custom.scss. Deliberately small: the
   goal for this phase is to keep the theme's own affordances and only carry
   over the parts that are the site's visual identity (the blue, the glow
   headings, the mono captions) plus the landing-page hero.
   --------------------------------------------------------------------------- */

:root {
  --md-primary-fg-color:        #1133dd;
  --md-primary-fg-color--light: #3355ff;
  --md-primary-fg-color--dark:  #0011aa;
  --md-accent-fg-color:         #0000ff;
  --md-typeset-a-color:         #1133dd;

  /* Self-hosted webfonts, declared in assets/fonts.css. Note: the fallback
     stacks below are spelled out rather than built on --md-text-font-family,
     because the theme declares that variable on `body`, not `:root` — a
     custom property can only resolve var() references that are visible at
     its own declaration scope, so referencing it here would make these
     properties invalid (and that invalidity would inherit to every
     descendant, including body itself). */
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
  --ah-heading-font: "Syne", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --ah-display-font: "Syne Tactile", var(--ah-heading-font);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #4466ff;
  --md-accent-fg-color:  #88a0ff;
  --md-typeset-a-color:  #7f9bff;
}

/* The header reads as the site's own chrome rather than a coloured bar. */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.md-header {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

/* The header row breaks out of the 61rem content measure and runs the full
   width of the viewport; the content column itself stays centred and narrow. */
.md-header__inner.md-grid {
  max-width: none;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

/* Search sits hard against the right gutter. The repo rail is always in the
   DOM and reserves 11.5rem at desktop widths even with no `repo_url` set,
   which would otherwise push search well short of the edge. */
.md-search {
  margin-left: auto;
}

.md-header__source {
  display: none;
}

.md-header__title {
  font-weight: 600;
}

/* The site name has been replaced by the news ticker (built in site.js), so
   give its slot the full width of the header and drop the page-title echo
   that Material would otherwise cross-fade in on scroll. */
.md-header__topic:not([data-md-component="header-topic"]) {
  width: 100%;
  font-family: var(--ah-heading-font);
  font-weight: 400;
}

.md-header__title--active
  .md-header__topic:not([data-md-component="header-topic"]) {
  z-index: 0;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.md-header__topic[data-md-component="header-topic"] {
  display: none;
}

/* The drawer keeps the actual site name, in the heading face, unadorned. */
nav[data-md-level="0"] > .md-nav__title {
  font-family: var(--ah-heading-font);
  font-weight: 700;
}

/* ----------------------------------------------------------- news ticker */

.ah-ticker {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  mask-image: linear-gradient(
    90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
}

.ah-ticker__track {
  display: flex;
  width: max-content;
  /* Travels leftward, so each headline reads in the normal direction as it
     arrives. Add `animation-direction: reverse` here to send it rightward. */
  animation: ah-ticker-scroll var(--ah-ticker-duration, 40s) linear infinite;
}

/* Hold still while someone is reading or reaching for a link. */
.ah-ticker:hover .ah-ticker__track,
.ah-ticker:focus-within .ah-ticker__track {
  animation-play-state: paused;
}

.ah-ticker__group {
  display: flex;
  flex: none;
}

.ah-ticker__item {
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
}

.ah-ticker__item::after {
  margin: 0 1.1rem;
  content: "·";
  opacity: 0.4;
}

a.ah-ticker__item:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}

@keyframes ah-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ah-ticker__track {
    animation: none;
  }
  .ah-ticker {
    overflow-x: auto;
  }
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Swap in the light-on-dark mark when the slate palette is active. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img {
  content: url("../logo-sm-dark.png");
}


/* --------------------------------------------------------------- typography */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--ah-heading-font);
}

/* Page titles: the cursive display face, large, sitting flush against the
   content that follows it (no shadow/glow, no uppercase — Tactile is a
   script face and reads poorly forced into caps or blurred). */
.md-typeset h1 {
  font-family: var(--ah-display-font);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  color: var(--md-default-fg-color);
  margin-top: 0;
  margin-bottom: 0;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Mono captions, matching the Hugo site. */
.md-typeset figure figcaption,
.md-typeset .caption {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  max-width: none;
  margin-top: 0.15rem;
}

.md-typeset figure {
  max-width: 100%;
  margin: 1.6rem auto;
}

.md-typeset figure img {
  width: 100%;
  height: auto;
}

/* The renderer inserts a <br> between the image and the figcaption when they
   sit on adjacent source lines (an md_in_html quirk); drop it so the caption's
   own margin is the only spacing between image and caption. */
.md-typeset figure br {
  display: none;
}

/* ------------------------------------------------------------------- hero */

.ah-hero {
  margin: 1rem 0 3rem;
}

.md-typeset .ah-hero__title {
  font-family: var(--ah-heading-font);
  font-size: 2.2rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: none;
  max-width: 22em;
  margin-bottom: 0.8rem;
}

.ah-hero > p:first-of-type {
  font-size: 0.9rem;
  max-width: 42em;
  color: var(--md-default-fg-color--light);
}

.ah-hero .md-button {
  margin: 0.4rem 0.4rem 0 0;
}

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

/* Image-led cards for the landing page: the picture carries the item, so drop
   the card chrome and let the grid breathe. */
.md-typeset .ah-cards > ul > li,
.md-typeset .ah-cards.grid.cards > ul > li {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transition: none;
}

.md-typeset .ah-cards > ul > li:hover {
  box-shadow: none;
}

.md-typeset .ah-cards > ul {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
}

/* Uniform crop so the grid reads as rows rather than a ragged masonry. */
.md-typeset .ah-cards img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 0.6rem;
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset .ah-cards p {
  margin: 0.2rem 0;
  font-size: 0.72rem;
  line-height: 1.5;
}

.md-typeset .ah-cards p strong a {
  font-size: 0.86rem;
}

.md-typeset .ah-cards a {
  text-decoration: none;
}

/* ----------------------------------------------------- page header + meta */

/* A compact accession-record band under the page title: monospace micro
   labels, values in the body face, hairline rules. It reads as provenance
   data, which suits a site about where images come from. */
.md-typeset .ah-page-header {
  margin-bottom: 1.8rem;
}

.md-typeset .ah-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  /* The h1 itself stays flush (margin: 0); the breathing room lives here. */
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .ah-meta__item {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin: 0;
}

.md-typeset .ah-meta__label {
  margin: 0;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .ah-meta__value {
  margin: 0;
  font-size: 0.56rem;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
}

.md-typeset .ah-meta__item--url {
  order: 99;
  margin-left: auto;
}

.md-typeset .ah-meta__link::after {
  margin-left: 0.2em;
  font-size: 0.85em;
  content: "\2197"; /* ↗ */
  opacity: 0.6;
}

/* The front matter description, standing in as a standfirst under the
   metadata record. Smaller than body copy and measure-limited, so it reads as
   a summary rather than the opening paragraph. */
.md-typeset .ah-page-header__description {
  max-width: 44em;
  margin: 0.55rem 0 0;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

.md-typeset .ah-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.md-typeset .ah-tag {
  padding: 0.15rem 0.45rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.53rem;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--md-default-fg-color) 6%, transparent);
  border: none;
  border-radius: 0.15rem;
}

.md-typeset .ah-tag::before {
  content: "#";
  opacity: 0.45;
}

.md-typeset .ah-tag:hover {
  background-color: color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

/* ----------------------------------------------------------- sidebar nav */

/* The theme tints the scrollbar thumb with the accent colour (blue, here) the
   moment the pointer rests on it — on top of the neutral grey it already
   turns to on hovering the sidebar itself. Keep it grey throughout. */
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-default-fg-color--lighter);
}

/* Minimal list: flush left, tight, almost-black labels. The active item is
   marked with a small solid square rather than a rounded background — that
   pill is what made the column read as padded and bulky. */
.md-nav--primary .md-nav__list {
  gap: 0;
}

.md-nav--primary .md-nav__link {
  gap: 0.4rem;
  padding: 0.14rem 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--md-default-fg-color);
  border-radius: 0;
}

/* The marker slot is reserved on every row, active or not, so the labels all
   sit on one vertical line. */
.md-nav--primary .md-nav__link::before {
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  margin-top: 0.36rem;
  content: "";
  background-color: transparent;
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: none;
}

/* The active marker blinks like a text caret — faded rather than hard on/off,
   so it reads as a cursor resting on the current page. */
.md-nav--primary .md-nav__item .md-nav__link--active::before {
  background-color: var(--md-default-fg-color);
  animation: ah-caret-blink 1.2s ease-in-out infinite;
}

@keyframes ah-caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
  .md-nav--primary .md-nav__item .md-nav__link--active::before {
    animation: none;
  }
}

/* The theme tints the row on hover/focus; the point of this pass was to get
   rid of the boxes, so only the colour shifts. */
.md-nav--primary .md-nav__link[for]:hover,
.md-nav--primary .md-nav__link[for]:focus,
.md-nav--primary .md-nav__link[href]:hover,
.md-nav--primary .md-nav__link[href]:focus {
  color: var(--md-accent-fg-color);
  background-color: transparent;
}

/* Nested groups (Exhibitions, Archive) are presented as flat sections like the
   top-level ones rather than collapsible folders: in a global sidebar the
   whole map should stay visible, which is the point of having one. */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  pointer-events: none;
}

.md-nav--primary .md-nav__item--nested > .md-nav__link .md-nav__icon {
  display: none;
}

/* Section labels read as quiet micro-headings, echoing the metadata labels
   on the page header. */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  margin-top: 0.75rem;
  margin-bottom: 0.1rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}

/* Top-level pages (About) sit above the sections; give them room so they do
   not read as the first entry of the list below. */
.md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) {
  margin-bottom: 0.6rem;
}

/* The table of contents nests inside the primary nav; leave it alone. */
.md-nav--secondary .md-nav__link::before {
  display: none;
}

/* ------------------------------------------------------------ index table */

.md-typeset .ah-index__status {
  margin: 0 0 0.8rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .ah-index__clear {
  padding: 0;
  font: inherit;
  color: var(--md-accent-fg-color);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.md-typeset .ah-index__table {
  display: table;
  width: 100%;
  font-size: 0.68rem;
  border-collapse: collapse;
}

.md-typeset .ah-index__table th,
.md-typeset .ah-index__table td {
  text-align: left;
}

.md-typeset .ah-index__table th {
  padding: 0.3rem 0.5rem 0.3rem 0;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .ah-index__table th:hover {
  color: var(--md-accent-fg-color);
}

/* Sort direction indicator; the column resting at neutral shows nothing. */
.md-typeset .ah-index__table th::after {
  content: "";
  opacity: 0.6;
}

.md-typeset .ah-index__table th[aria-sort="ascending"]::after {
  content: " ↑";
}

.md-typeset .ah-index__table th[aria-sort="descending"]::after {
  content: " ↓";
}

.md-typeset .ah-index__table td {
  padding: 0.3rem 0.5rem 0.3rem 0;
  vertical-align: top;
  border-top: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Site index rows: roomier cells, text centred against the thumbnail. Scoped
   to --site so the press tables keep their own tighter rhythm. */
.md-typeset .ah-index--site .ah-index__table td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  vertical-align: middle;
}

.md-typeset .ah-index__table tbody tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset .ah-index__table a {
  text-decoration: none;
}

/* The PNGs stay 240px wide — only the rendered box shrinks, which keeps them
   crisp on high-density screens. */
.md-typeset .ah-index__thumb {
  width: 2.6rem;
  padding-right: 0.9rem;
}

.md-typeset .ah-index__thumb img {
  display: block;
  width: 2.6rem;
  height: 1.75rem;
  object-fit: cover;
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 0.1rem;
}

/* Visually hidden, still announced. */
.ah-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Section, Created, Updated — cells 3/4/5 of the site index, after the
   thumbnail and page. Scoped to --site: the press tables below share the
   .ah-index__table class but order their columns differently. */
.md-typeset .ah-index__section,
.md-typeset .ah-index--site .ah-index__table td:nth-child(4),
.md-typeset .ah-index--site .ah-index__table td:nth-child(5) {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.6rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.md-typeset .ah-index__tag {
  padding: 0.05rem 0.34rem;
  margin: 0 0.16rem 0.16rem 0;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.55rem;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  background: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.1rem;
}

.md-typeset .ah-index__tag:hover {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* Selected tag, and the rows carrying it. Nothing is hidden or dimmed — the
   whole index stays readable, the matches just come forward. */
.md-typeset .ah-index__tag--on {
  font-weight: 700;
  color: var(--md-default-bg-color);
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.md-typeset .ah-index__table tbody tr.ah-index__row--on {
  background-color: var(--md-accent-fg-color--transparent);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ah-index__table,
  .md-typeset .ah-index__table tbody,
  .md-typeset .ah-index__table tr {
    display: block;
  }

  /* The Section column is the first thing worth losing on a phone. */
  .md-typeset .ah-index__table thead,
  .md-typeset .ah-index__section {
    display: none;
  }

  .md-typeset .ah-index__table td {
    display: inline-block;
    padding-right: 0.6rem;
    border-bottom: none;
  }

  .md-typeset .ah-index__thumb {
    display: block;
    float: left;
    width: auto;
    padding-right: 0.6rem;
  }

  .md-typeset .ah-index--site .ah-index__table td:nth-child(2) {
    display: block;
    font-size: 0.78rem;
  }

  .md-typeset .ah-index__table tr::after {
    display: block;
    clear: both;
    content: "";
  }

  .md-typeset .ah-index__table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
  }
}

/* ------------------------------------------------------------------ press */

/* The About tables borrow the index table's sorting but take their looks from
   the homepage's recent-press list: airy rows, a quiet monospace date, the
   outlet in bold, the headline plain. Columns are addressed by class rather
   than position, so nothing here depends on the column order. */
/* One line per row. A wrapped cell breaks the rhythm that makes these tables
   readable at a glance, so long values clip with an ellipsis and carry their
   full text in a title attribute. Fixed layout is what makes text-overflow
   work at all in a table cell — the auto algorithm sizes columns to content
   and never triggers it. Below the breakpoint they wrap instead, since a
   phone has no hover to reveal what was clipped. */
.md-typeset .ah-press .ah-index__table {
  font-size: 0.72rem;
  table-layout: fixed;
  width: 100%;
}

.md-typeset .ah-press .ah-press__source,
.md-typeset .ah-press .ah-press__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-typeset .ah-press .ah-index__table td {
  padding: 0.42rem 0.5rem 0.42rem 0;
  vertical-align: baseline;
}

/* Column widths, read off the header row by the fixed layout algorithm. */
.md-typeset .ah-press__icon {
  width: 1.7rem;
  padding-right: 0.45rem;
}

.md-typeset .ah-press .ah-press__date {
  width: 6.6rem;
}

/* Values are two letters, but the "Country" header is what sets the floor. */
.md-typeset .ah-press .ah-press__country {
  width: 4.4rem;
}

.md-typeset .ah-press .ah-press__source {
  width: 28%;
}

.md-typeset .ah-press__icon img {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  object-fit: contain;
}

.md-typeset .ah-press__date,
.md-typeset .ah-press__country {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.58rem;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
}

.md-typeset .ah-press__source {
  font-weight: 600;
}

.md-typeset .ah-press__title a {
  color: var(--md-typeset-a-color);
}

.md-typeset .ah-press__authors {
  font-size: 0.58rem;
  color: var(--md-default-fg-color--lighter);
  white-space: nowrap;
}

@media screen and (max-width: 59.9375em) {
  /* No hover here to reveal a clipped cell, so let everything wrap and drop
     back to the content-sized layout. */
  .md-typeset .ah-press .ah-index__table {
    table-layout: auto;
  }

  .md-typeset .ah-press .ah-press__source,
  .md-typeset .ah-press .ah-press__title {
    width: auto;
    overflow: visible;
    white-space: normal;
  }
}

/* Recent press on the landing page: date, source, headline, no bullets. */
.md-typeset .ah-press-recent {
  padding: 0;
  margin: 0;
  list-style: none;
}

.md-typeset .ah-press-recent__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  align-items: baseline;
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .ah-press-recent__date {
  flex: none;
  min-width: 7.2rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.58rem;
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .ah-press-recent__source {
  flex: none;
  font-weight: 600;
}

/* Prev/next page links, in the display face used by the page titles they
   point at. */
.md-footer__link .md-ellipsis {
  font-family: var(--ah-display-font);
  font-size: 1.05rem;
  font-weight: 400;
}

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

.ah-footer-links {
  display: flex;
  gap: 0.7rem;
}

.md-footer-meta .ah-footer-links a {
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
}

.md-footer-meta .ah-footer-links a:hover {
  color: var(--md-accent-fg-color);
}

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

.md-footer-meta {
  background-color: var(--md-default-bg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-footer-meta,
.md-footer-meta .md-footer-copyright,
.md-footer-meta .md-social__link {
  color: var(--md-default-fg-color--light);
}

/* One line: copyright at the left, then the social links, with the generator
   credit hard right. `display: contents` lifts .md-copyright's two children
   into the same flex row as .md-social — they sit a level apart in the markup,
   and all three need to be ordered independently. The side gutter lives on the
   container and is zeroed on the children, which otherwise carry their own
   margins and overhang on narrow screens. */
.md-footer-meta__inner {
  align-items: center;
  gap: 0.2rem 0.8rem;
  padding: 0.35rem 0.8rem;
}

.md-copyright {
  display: contents;
}

.md-copyright__highlight {
  max-width: 100%;
  margin-right: auto;
}

.md-social {
  order: 2;
  padding: 0;
  margin: 0;
}

.ah-generator {
  order: 3;
  white-space: nowrap;
}

/* Too narrow for a single row; let it wrap and read left to right. */
@media screen and (max-width: 44.9375em) {
  .md-copyright__highlight {
    margin-right: 0;
  }
}

.md-social__link svg {
  fill: currentColor;
}

/* ------------------------------------------------------------ small screens */

@media screen and (max-width: 76.1875em) {
  .md-typeset .ah-hero__title {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ah-hero__title {
    font-size: 1.4rem;
  }

  /* 3rem is a desktop measure; it swamps a phone column. */
  .md-typeset h1 {
    font-size: 2rem;
  }

  .md-typeset .ah-meta {
    gap: 0.2rem 1rem;
  }
}