/*
 * Shimti Multimedia: section pages
 *
 * Shared stylesheet for about / ai / work / shop / media / contact.
 *
 * Separate from styles.css on purpose. That file styles the homepage's fixed, non
 * scrolling radial interface - it sets overflow:hidden on html and body, which would
 * make a page of prose impossible to scroll. These pages are ordinary documents and
 * need ordinary document behaviour.
 */

@font-face {
  font-family: 'Orbitron';

  /*
   * One variable WOFF2, covering the whole weight axis.
   *
   * This replaces a static Orbitron-Regular.ttf, and fixes two things at once.
   *
   * SIZE. WOFF2 is Brotli-compressed and is the universally supported web font format;
   * raw TrueType is not a web delivery format at all. The variable file is 16KB against
   * the single static weight's 24KB - smaller while carrying every weight rather than one.
   *
   * WEIGHT. Only weight 400 used to be declared, yet the stylesheet asks for 600 in
   * several places and so does the rotating wordmark. With no 600 to load, the browser
   * synthesised one by smearing the regular weight sideways - faux bold, visibly coarser
   * than the real thing, on the brand's own wordmark. The real weights were sitting
   * unused on disk the whole time. Declaring the axis range means 600 now resolves to
   * actual 600.
   */
  src: url('../fonts/Orbitron-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-color: #eaffff;
  --muted-color: rgba(234, 255, 255, 0.72);
  --panel-bg: rgba(180, 220, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.65);
  --accent: #8cf;
  --focus-outline: #8cf;
}

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

html {
  scroll-behavior: smooth;
}

/*
 * The window does not scroll; the sheet inside it does.
 *
 * The masthead and the footer are the frame the page is mounted in, so they stay put and
 * only the white area moves - which is also what keeps the frame from sliding away and
 * leaving the doors' surround visible mid-scroll. Using the small viewport unit rather
 * than 100vh so mobile browser chrome cannot push the footer off the bottom.
 */
body {
  margin: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: var(--text-color);
  font-family: 'Orbitron', sans-serif;
  line-height: 1.7;
}

/* Visible only once focused, so keyboard users can jump the header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #000;
  border: 2px solid var(--accent);
  color: var(--text-color);
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

a {
  color: var(--text-color);
  text-decoration-color: rgba(180, 220, 255, 0.6);
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-color: var(--accent);
}

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

/* ---------- Header ---------- */

/*
 * Stacked and centred: masthead, then the studio line, then the navigation.
 *
 * The old header put a small wordmark on the left and the nav on the right, which reads as
 * an app toolbar. This is a page - the doors have shut and this is what is printed on them
 * - so it gets a masthead, and the masthead is the biggest thing on it.
 */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(0.5rem, 1.2vw, 0.8rem) clamp(1rem, 4vw, 3rem) clamp(0.45rem, 1vw, 0.7rem);
  text-align: center;
  border-bottom: 1px solid rgba(180, 220, 255, 0.25);
}

/*
 * Wordmark and tagline are one thing, so they are grouped and spaced as one.
 *
 * They used to be two children of the header sharing its gap, which spaced them the same
 * distance apart as the navigation below - so they read as two separate items rather than
 * as a title and its subtitle.
 */
.section-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.section-home {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Masthead scale. Grows with the viewport but stops before it wraps awkwardly on a
     wide monitor. */
  font-size: clamp(1.2rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  text-decoration: none;
}

.section-home img {
  filter: brightness(1.1);
  /* Tied to the text it sits beside, so the lockup keeps its proportions at every size
     rather than the logo drifting relative to the wordmark. */
  width: clamp(2rem, 5vw, 3.25rem);
  height: auto;
}

.section-tagline {
  margin: 0;
  color: var(--muted-color);
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav a {
  display: block;
  padding: 0.3rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.section-nav a:hover {
  background: var(--panel-bg);
  border-color: var(--border-color);
}

/* The current page is marked for everyone, not colour alone: aria-current carries it
   to assistive technology, and the border carries it to anyone who cannot distinguish
   the highlight. */
.section-nav a[aria-current="page"],
.section-nav a[aria-current="true"] {
  background: var(--panel-bg);
  border-color: var(--border-color);
}

/* ---------- Main ---------- */

/*
 * The page itself: a white sheet spanning everything between header and footer.
 *
 * The doors are the dark surround. What is printed on them is an ordinary page, and an
 * ordinary page is a light one - so this is where the sci-fi shell stops and readable
 * long-form content starts. The colours are re-declared rather than inherited, because
 * every token in :root is tuned for light text on black and every one of them is wrong
 * here.
 */
.section-main {
  flex: 1;
  /* Without this a flex child refuses to shrink below its content and scrolls the body
     instead, which is the whole thing being avoided here. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;

  /*
   * The tokens are re-pointed rather than the rules being overridden one by one.
   *
   * Every value in :root is tuned for pale text glowing on black, and every one of them
   * is wrong on a white sheet - the muted grey turns invisible, the panel fill and the
   * borders disappear into the background. Redefining the same names here means each
   * existing rule keeps working and simply resolves to ink instead of light. Anything
   * added to the sheet later inherits the correct palette without knowing this happened.
   *
   * All four foreground values clear WCAG 1.4.3 AA against white: the body text at about
   * 17:1, the muted text and the link colour both around 7:1.
   */
  --text-color: #10151c;
  --muted-color: #4a5560;
  --panel-bg: #f2f5f8;
  --border-color: #c9d3dc;
  --accent: #10517d;
  --focus-outline: #10517d;

  background: #ffffff;
  color: var(--text-color);
}

/* The sheet is full width; the reading column inside it is not. */
.section-main > article {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);

  /* Makes this the size reference for .section-title below, so the heading can be sized
     against the column it has to fit inside rather than against the viewport. */
  container-type: inline-size;
}

.section-main a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

.section-main a:hover {
  color: #0a3a5c;
}

/*
 * The hero, and the line laid over it.
 *
 * The frame exists only to give the caption something to be positioned against; the image
 * keeps its own sizing so the space is still reserved before it loads.
 */
.section-hero-frame {
  position: relative;
  margin: 0 0 2rem;
  border-radius: 10px;
  /* Clips the scrim to the rounded corners - without this it squares off the bottom two. */
  overflow: hidden;
}

.section-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 3.5rem clamp(0.9rem, 2.5vw, 1.5rem) clamp(0.7rem, 1.8vw, 1rem);
  color: #ffffff;
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /*
   * A scrim, not a guess.
   *
   * Text on an image has no contrast it can rely on - a photograph can be any brightness
   * at any point, and this one changes per page. The gradient guarantees a dark ground
   * under the words wherever the image happens to be pale, which is what keeps this
   * legible rather than hoping the photographs cooperate. The tall top padding is what
   * gives the fade room to be gradual instead of a band.
   */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/*
 * A plate, not a hero.
 *
 * .section-hero crops to 16/9 with object-fit: cover, which is right for a photograph
 * chosen to fill a band and wrong for an artefact. This image is a cylinder-seal
 * impression roughly 1.94:1, so cover would shave the cuneiform panels off both ends -
 * cutting away the part of the object that carries the writing. A plate therefore shows
 * the whole thing at its own proportions, deriving the box from the width and height
 * attributes so the space is still reserved before it loads.
 *
 * The credit sits below the image rather than in a .section-eyebrow laid over it, for the
 * same reason: an overlay would cover the artefact it is captioning.
 */
.section-plate {
  margin: 0 0 2rem;
}

.section-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  /* A dark ground, so a scanned object with a ragged edge reads as a plate rather than as
     a picture bleeding into the sheet. */
  background: #12161c;
}

.section-plate figcaption {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted-color);
}

/*
 * A smaller figure, set into the text rather than interrupting it.
 *
 * Floated left directly under its heading so the paragraphs run down the right of it and
 * then close underneath - the ordinary magazine set, and the reason the figure has to be
 * written into the markup BEFORE the paragraphs it wraps: a float only pushes content
 * that comes after it in source order.
 *
 * Sized in rem rather than as a percentage so the picture stays the same physical size as
 * the column widens, which keeps it subordinate to the writing on a large screen.
 *
 * Museum photographs arrive with their own pale backdrop, so no ground is painted behind
 * them - one would only show as a rim.
 */
.section-figure {
  float: left;
  width: 14rem;
  margin: 0.4rem 1.5rem 0.9rem 0;
}

.section-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/*
 * A banner, whether or not it goes anywhere yet.
 *
 * Linked entries carry this on an <a>, the rest on a <span>, so one rule covers both and
 * there is nothing to remember when an address arrives. Only the anchor takes a pointer
 * cursor and focus, so the picture reacts to the mouse without promising a click that
 * cannot be honoured.
 *
 * transform is used for the growth rather than width/height because it is composited:
 * it cannot reflow the paragraph wrapped around the float, so the text beside it stays
 * exactly where it was while the picture lifts. The site-wide reduce-motion rule at the
 * end of this file flattens the transition for anyone who asks for that; the glow still
 * appears, so the affordance survives without the movement.
 */
.shop-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* A span is inline by default, which would collapse the box around the picture. */
span.shop-link {
  display: block;
}

.shop-link:hover,
.shop-link:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--accent), 0 0 20px 2px rgba(16, 81, 125, 0.45);
}

/* The outline would be hidden by the overflow clip above, so the glow is the focus
   indicator - stated explicitly rather than left to the browser to lose. */
.shop-link:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 3px;
}

/* Only ever a credit a licence demands, never a description - the alt text carries what
   the picture shows. */
.section-figure figcaption {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-color);
}

/*
 * A float escapes its own section unless something stops it, so a tall picture would
 * otherwise hang down beside the NEXT heading and shove it sideways. Clearing every
 * heading ends the wrap where the section ends.
 */
.section-main h2,
.section-main h3,
.pager {
  clear: both;
}

/*
 * A section break needs to be bigger than the gaps inside a section, or the groups read
 * as one continuous list. The h3 entries sit 2rem apart, so the h2 above them gets more
 * than double that - and the rule marks the boundary for the eye without adding a word.
 */
.section-main h2 + .section-icon {
  margin-top: 0.25rem;
}

.section-main h3 ~ h2 {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

/*
 * Below roughly 34em the column is too narrow to hold a picture and a readable line
 * beside it - the text would set in a four-word gutter. So the float is dropped and the
 * figure becomes a normal block.
 */
@media (max-width: 34em) {
  .section-figure {
    float: none;
    width: auto;
    max-width: 18rem;
    margin: 1.25rem 0 1.5rem;
  }
}

/*
 * Sized against the reading column, not the viewport.
 *
 * The old value was clamp(2rem, 7vw, 3.5rem), which is a bet that no page ever gets a
 * long title. "How we got the name" needed 876px of the 865px available and wrapped to
 * two lines, and the fix of dropping the maximum a notch would have been a magic number
 * good until the next title.
 *
 * cqi is a percentage of the column's own inline size, and the width a line of set caps
 * needs is also proportional to the type size - so a title sized in cqi keeps the same
 * ratio to the measure at every width, and the longest title on the site fits on one line
 * by construction rather than by coincidence. 6.2cqi leaves headroom over the 6.39cqi at
 * which the longest one would touch the edge.
 *
 * The bounds still matter: on a phone the column is too narrow for a heading this long to
 * hold one line at a readable size, so it wraps there, which is normal and fine.
 */
.section-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 6.2cqi, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}

.section-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border-color);
  /* width/height plus aspect-ratio reserve the space before the image arrives, so the
     text below never jumps once it loads. */
}

/*
 * Long-form content inside the sheet.
 *
 * The sheet used to hold one paragraph, so it needed no typographic scale. It holds real
 * writing now, and writing needs a hierarchy to be read rather than just displayed:
 * headings that are clearly headings, and space between blocks that separates ideas
 * instead of merely existing.
 */
.section-main h2 {
  margin: 2.5rem 0 0.75rem;
  /*
   * Sized from the column like .section-title, so the two keep their relationship at any
   * width instead of drifting apart as the viewport changes. About 3.6cqi against the
   * title's 6.2cqi - clearly a heading, clearly not the name of the page.
   */
  font-size: clamp(1.15rem, 3.6cqi, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/*
 * A third level, for pages that group entries under a section - the marketplaces on Shop.
 * Deliberately quieter than h2: same family, no uppercasing, and ink rather than accent,
 * so the eye reads it as an item inside the group above rather than as a new group.
 */
/*
 * The mark under a section title.
 *
 * Sits between the heading and its first line of text, so it reads as belonging to the
 * section rather than floating beside it. Takes currentColor and the heading's accent, so
 * one file serves the light sheet and would serve a dark one unchanged. Purely decorative
 * - the heading immediately above already names the section - hence aria-hidden in the
 * markup and no title element here.
 */
.section-icon {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 0 1.1rem;
  fill: var(--accent);
}

.section-main h3 {
  margin: 2rem 0 0.5rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.section-main p {
  margin: 0 0 1.1rem;
}

/*
 * The address, given the weight of the thing it is.
 *
 * This page exists to produce one action, so the address is set as a heading rather than
 * buried in a sentence - a visitor who reads nothing else on the page should still leave
 * with it. Wrapping is forced on because an email address is one long unbreakable word and
 * would otherwise overflow the sheet on a narrow screen.
 */
.section-contact {
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 3.2vw, 1.75rem);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.section-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  /* Two columns where there is room, one where there is not. Eight single words spread
     across four thin columns read as scattered; paired up they read as a set. min() keeps
     the track from exceeding the container on a narrow screen. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.35rem 1.5rem;
}

.section-list li {
  padding-left: 1.1rem;
  position: relative;
}

.section-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
}

/*
 * Breadcrumbs.
 *
 * The separators are drawn here rather than typed into the markup, because a screen
 * reader announcing "Home slash About slash The name" is reading punctuation aloud. They
 * are decoration; the list structure is the actual information.
 */
.crumbs {
  margin: 0 0 1.25rem;
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-color);
}

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

.crumbs li + li::before {
  content: '/';
  margin-right: 0.6rem;
  opacity: 0.5;
}

.crumbs a {
  color: inherit;
}

/*
 * The hub: four summaries that hand over to their own pages.
 */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem 1.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

/*
 * The thumbnail on a hub card.
 *
 * Each one is the opening image of the page the card links to, so the picture is a preview
 * of the destination rather than decoration. aria-hidden and tabindex="-1" because the
 * heading beneath already links to the same place: without that, every card would present
 * a screen reader with two identical links and a keyboard user with two tab stops for one
 * destination. The alt is empty for the same reason.
 */
.hub-thumb {
  display: block;
  margin: 0 0 0.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.hub-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The routes inside the last card: a list, but not a bulleted one - it is already inside
   a list item, and a second level of bullets reads as a menu rather than as prose. */
.hub-routes {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted-color);
}

.hub h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hub h3 a {
  text-decoration: none;
}

.hub h3 a:hover,
.hub h3 a:focus-visible {
  text-decoration: underline;
}

.hub p {
  margin: 0;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  color: var(--muted-color);
}

/*
 * Onward navigation at the foot of each sub-page.
 *
 * space-between with an empty span holding the first slot, so "Next" stays hard right on
 * the first page instead of sliding left where "Previous" would have been.
 */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
}

.pager-next {
  text-align: right;
}

.pager a span {
  font-size: clamp(0.68rem, 1.4vw, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.pager a:hover,
.pager a:focus-visible {
  text-decoration: underline;
}

/*
 * The practices.
 *
 * Auto-fitting columns rather than a fixed count, so the grouping survives every width
 * without a breakpoint per screen size. Each group is a section with a real heading, which
 * is what lets a screen reader move between practices instead of wading through one
 * undifferentiated list of eighteen items.
 */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 1.75rem;
  margin: 0 0 1.75rem;
}

.craft h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.craft ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.craft li {
  position: relative;
  padding-left: 0.9rem;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
}

.craft li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--accent);
}

.section-intro {
  margin: 0 0 2.5rem;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
}

/*
 * Back to top.
 *
 * Fixed to the viewport rather than placed in the sheet, so it stays put while the thing
 * it controls scrolls underneath it. Sat above the footer rather than over it - the
 * footer is short and a button crossing it reads as a mistake.
 *
 * 2.75rem square, comfortably past the 24px minimum target of WCAG 2.5.8, and it inherits
 * the sheet's ink rather than the interface's glow because it sits against white.
 *
 * [hidden] is honoured explicitly: this element is display:flex, and a class-based display
 * beats the browser's own [hidden] { display: none }, which would otherwise leave the
 * button on screen permanently.
 */
.to-top {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: 3.5rem;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  border: 1px solid #c9d3dc;
  border-radius: 50%;
  background: #ffffff;
  color: #10517d;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 21, 28, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.to-top[hidden] {
  display: none;
}

.to-top svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  pointer-events: none;
}

.to-top:hover,
.to-top:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16, 81, 125, 0.35);
}

.to-top:focus-visible {
  outline: 2px solid #10517d;
  outline-offset: 3px;
}

/* The sheet is given tabindex="-1" when the button moves focus to it. That makes it
   focusable, and a focus ring around the entire page is not useful - the scroll position
   is the feedback. */
.section-main:focus {
  outline: none;
}

/* ---------- Footer ---------- */

.section-footer {
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(180, 220, 255, 0.25);
  color: var(--muted-color);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  letter-spacing: 0.08em;
  text-align: center;
}

.section-footer p {
  margin: 0;
}

/*
 * The channels. Contact only, deliberately.
 *
 * They lived in the footer of every page, which put seven links in front of someone on
 * every single screen and took the height out of a reading area that cannot scroll the
 * window to get it back. They belong on the page where a visitor has already decided to
 * make contact.
 */
.channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.4rem 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.channel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  color: var(--muted-color);
  text-decoration: none;
}

/* The mark takes the link's colour, so one file serves both states. */
.channel-mark {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}

.channel:hover,
.channel:focus-visible {
  color: var(--accent);
}

.channel:hover span,
.channel:focus-visible span {
  text-decoration: underline;
}

/* Honours the OS reduce-motion setting (WCAG 2.1 SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}