@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter-600-latin.ba19f43b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter-600-latin-ext.ca598863.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter-700-latin.d83c4fdd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter-700-latin-ext.6d2763c0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karla-400-latin.e77a86a6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/karla-400-latin-ext.491a2dcc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/karla-500-latin.5ff68018.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/karla-500-latin-ext.2fbf20c9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/karla-600-latin.f29a052b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/karla-600-latin-ext.d4a82b41.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karla-700-latin.f15ab75b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/karla-700-latin-ext.fbaeb4a7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================================================
   The paper. Enamelled steel, not cream.

   This is apps/mascot-game/src/theme/MascotTheme.tsx's mechanism, unchanged: a
   :root block redefining @hexeon/ui's own custom properties, so every surface
   below moves in one paint and nothing in packages/ui is edited. The ruling
   that removed the cream, and the luminance of every value against the one it
   replaces, are in apps/mascot-game/src/theme/paper.ts.

   Load-bearing, not decorative: src/generator/paper.ts strips the Pioneer
   fallback from each property named here, so this block is the only definition
   they have.
   =========================================================================== */
:root {
  --hx-plank-bg: #e8eef2;
  --hx-card-bg: #f2f7fa;
  --hx-hairline: #d2d9de;
  --hx-ink-ground: #cbd4da;
  --hx-ink-ground-strong: #ebf1f5;
  --hx-ink-dark-title: #edf2f6;
  --hx-ink-dark-kicker: #d5dce1;
}

/* ===========================================================================
   Mobile first. Every rule below is the phone's; a wider screen adds to them
   with min-width, and nothing anywhere unpicks a desktop layout for a phone.

   Nothing is hidden at either width either: no content is dropped for a phone,
   only rearranged. A two-column row becomes one column, the hero's seam
   gradient simply does not apply, and every sentence and every plate is still
   on the page.
   =========================================================================== */

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

html {
  /* Set per page from the locale manifest; hyphenation needs the real tag, and
     French needs it more than English at a phone's measure. */
  hyphens: auto;
  /* Stop iOS inflating text in landscape, which breaks a measure set in ch. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hx-ground, #0a0c10);
  color: var(--hx-ink-ground);
  font-family: 'Karla', 'Avenir Next', system-ui, sans-serif;
  font-size: clamp(15px, 13.30px + 0.435vw, 18px);
  line-height: 1.4;
  /* Every number this site prints is a figure in a sentence, and a figure that
     changes width as it changes value is a figure that makes a line jump. */
  font-variant-numeric: tabular-nums;
  /* A long unbroken token - a URL in a legal page - must not push the layout
     wider than the phone. */
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hx-ink-ground-strong);
  margin: 24px 0 14px;
  /* A display face at a heading size gets loose at the phone end. */
  letter-spacing: -0.01em;
  /* And no hyphenation on a heading. The document keeps hyphens: auto, which
     French prose at a 358 px measure genuinely needs - but a heading is six
     words at forty pixels or more, and the browser broke "planète" across two
     lines of the hero. A hyphen inside a word at display size reads as a
     mistake rather than as typography, and a heading has a space to break at. */
  hyphens: manual;
}
h1 { font-size: clamp(30px, 26.61px + 0.870vw, 36px); }
h2 { font-size: clamp(19px, 16.74px + 0.580vw, 23px); }
h3 { font-size: clamp(16px, 13.74px + 0.580vw, 20px); font-weight: 600; }

p, ul { margin: 0 0 14px; }
ul { padding-left: 16px; }

/* Tables. The privacy policy's retention overview is the one that matters: four
   columns of prose, read on a phone, in the document that tells somebody how
   long their data is kept.

   The wrapper scrolls, never the page. A table wide enough to need it would
   otherwise widen the whole document body, and a body that scrolls sideways
   breaks every page sharing this layout rather than the one table that caused
   it. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 14px;
  /* The scroll region is focusable so a keyboard can reach it; without this an
     overflow container is scrollable by pointer only. */
  border-radius: 4px;
}
table {
  border-collapse: collapse;
  /* auto, not 100%: a four-column table forced to the container's width
     squeezes columns into one word per line. It takes the width it needs and
     the wrapper scrolls. */
  width: auto;
  min-width: 100%;
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  line-height: 1.4;
}
/* Filet, and this is the one thing a divider inside a panel is for.
 *
 * It used to be CARD_BORDER, which is white at fifty-five percent - a rule
 * drawn in white on a light panel, at about 1.1:1, which is a row separator
 * with no separator in it. Filet is 1.22:1 against the panel and that is
 * **correct for this job and disqualifying for any other**: a table's row rule
 * is decoration over an alignment a reader already has from the columns, and
 * WCAG 1.4.11's 3:1 is owed by a boundary somebody must perceive to use the
 * page. Filet is never text and never a control's edge. */
th, td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hx-hairline);
}
th {
  font-weight: 600;
  color: var(--hx-ink-strong, #141210);
  white-space: nowrap;
}
/* The last row's rule would otherwise float under the table with nothing
   beneath it. */
tbody tr:last-child td { border-bottom: none; }

img, svg, video {
  /* The single rule that stops an image widening the page on a phone. Every
     image the site ever ships also carries width and height attributes, so the
     space is reserved before it loads and the text below does not jump. */
  max-width: 100%;
  height: auto;
}

/* A link on the dark ground wears Laiton, which clears AA there at 9.53:1.
 *
 * ACCENT_LIGHT and not ACCENT: both clear, and this is the lighter of the two,
 * which is what a link read on deep space wants. It is deliberately not brass
 * (ACCENT_BORDER's neighbour in the frost frame): brass is the frame's rivet
 * metal, which is furniture rather than type, and it is 1.57:1 on a panel -
 * so a rule that used it for a link would be one edit away from being wrong. */
a {
  color: var(--hx-accent-light, #dcae55);
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* The client's focus ring, visible on the world and on paper alike. Never
   removed, never replaced by an outline of the page's own. */
:focus-visible {
  outline: 2px solid var(--hx-accent-light, #dcae55);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--hx-card-bg);
  color: var(--hx-ink-strong, #141210);
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 10;
}
.skip-link:focus { left: 16px; }

/* ---------------------------------------------------------------------------
   The rail. The site's header is the client's dark plank, as every screen's
   header is, and its links sit on no chrome bar of their own (plan 4.4).

   On a phone it stacks: wordmark, then navigation, then the language switcher.
   It does not become a hamburger, and that is deliberate - **three items and
   two languages fit**. Measured at 390: "Le monde", "Les créatures" and
   "L'absence" with 14 px gaps is about 267 px inside a 358 px measure, so it is
   one row that needs no menu, no toggle and no script.
   --------------------------------------------------------------------------- */

.rail {
  background: var(--hx-plank-dark-bg, #0b0907);
  padding: 14px 16px;
}
.rail-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail a { color: var(--hx-ink-dark-title); text-decoration: none; }
.rail a:hover, .rail a[aria-current="page"] { color: var(--hx-accent-light, #dcae55); }
/* The wordmark is the lockup, not the name set as type.
 *
 * **This rule used to be a font family, a weight and a size**, beside a span
 * that drew a solid hexagon with the client's clip path. So the header had no
 * logo in it at all - the name was type and the mark had no world inside it,
 * which docs/logo.md section 1 says is the one shape the identity may not be,
 * because an empty hexagon is the credit glyph.
 *
 * The width is the section 4.1 table: 120 at a phone, which is the lockup's own
 * documented minimum, and 160 above the breakpoint. min-width carries the floor
 * into the rendered box as well as into logo.ts, because a header is where a
 * logo gets scaled by a layout rather than by a person.
 *
 * aspect-ratio from the SVG's exact viewBox rather than from the rounded
 * attributes, so there is no reflow between the attribute box and the loaded
 * file. */
.wordmark { display: inline-flex; }
.wordmark img, .wordmark-paper img {
  display: block;
  width: 120px;
  min-width: 120px;
  height: auto;
  aspect-ratio: 405.337 / 100;
}
/* Clear space, from the mark's height: 0.28 on every side, twice the ring's
   thickness. The rail's own padding covers the vertical pair at both widths;
   this is the horizontal one, which the gap to the navigation would otherwise
   decide. */
.wordmark { padding-right: 8.29px; }

/* The chooser's and the 404's heading is the lockup on enamel, so the heading
   has no type of its own. */
.wordmark-paper { margin-top: 0; }
.rail nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
/* 44 px on every link a finger has to hit, and the padding is what earns it
   rather than a height that would push the text off its own baseline. */
.rail nav a, .locales a, footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.kicker {
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hx-ink-dark-kicker);
}

/* ---------------------------------------------------------------------------
   The reading column: opaque paper, never frost. Frost is what a frame may be
   where there is a real backdrop behind it, and there is none here (plan 4.2).
   --------------------------------------------------------------------------- */

main.reading {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 16px;
}
.paper {
  background: var(--hx-plank-bg);
  color: var(--hx-ink-body, #2c2823);
  border-radius: 13px;
  padding: 14px;
  max-width: 68ch;
}
.paper h1, .paper h2, .paper h3 { color: var(--hx-ink-strong, #141210); }
.paper h1:first-child { margin-top: 0; }

/* A link on paper is ink, not accent, and it is underlined.
 *
 * The accent is #c08c31 and the panel is enamel: no accent variant in the
 * palette clears 4.5 on it, and brass reaches 1.57. INK_ON_ACCENT_WASH is the
 * accent's own hue taken to INK_STRONG's luminance, which is 16.00:1 on the
 * panel and keeps the link the family's colour rather than a borrowed blue. The
 * underline is what says "link", which is the client's rule anyway: colour is
 * never the only signal.
 *
 * Found by test/style.test.ts, not by looking at it. */
.paper a, .panel a {
  color: var(--hx-ink-accent-wash, #181106);
  text-decoration-color: var(--hx-accent-border, #9a6d23);
  text-decoration-thickness: 1px;
}
.paper a:hover, .panel a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------
   The sections layout: bands on the ground, each with a panel and, where one
   exists, a plate beside it.

   **A plate is never inside a panel.** Every capture is a picture of the
   client's own panels, so a panel inside a panel is a frame inside a frame. A
   plate sits on the ground with one hairline and the module radius.
   --------------------------------------------------------------------------- */

main.sections { padding: 0; }

.band-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* The rhythm is the distance **between** two sections, so each one carries half
 * of it.
 *
 * It was the whole of it on each side, and padding does not collapse, so the
 * measured gap between two sections was 96 at 390 and 192 at 1280 - exactly
 * twice RHYTHM_PHONE and RHYTHM_DESKTOP, whose own comment says 48 and 96.
 * Four sections of two sentences then filled two screens of mostly empty
 * ground. Measured in a browser at both widths, 17/09/2026.
 *
 * The first and the last keep the full value, so the distance from the hero and
 * the distance to the footer are unchanged and only the rhythm moves. */
.sections section { padding: clamp(24px, 10.43px + 3.478vw, 48px) 0; }
.sections section:first-of-type { padding-top: clamp(48px, 20.87px + 6.957vw, 96px); }
.sections section:last-of-type { padding-bottom: clamp(48px, 20.87px + 6.957vw, 96px); }
.sections section h2 { margin-top: 0; }

/* The panel: the section's own prose, on enamel. */
.panel {
  background: var(--hx-plank-bg);
  color: var(--hx-ink-body, #2c2823);
  border-radius: 13px;
  padding: 14px;
  max-width: 60ch;
}
.panel > :last-child { margin-bottom: 0; }
.panel .note { color: var(--hx-ink-kicker, #4a453d); font-size: clamp(14px, 12.30px + 0.435vw, 17px); }

/* The plate. On the ground, at 1:1, with a decorative edge.
 *
 * The edge is Encre sur espace at thirty percent rather than Filet: Filet is a
 * light rule meant for a light panel and disappears on the ground. It is
 * decoration either way - **the plate's own pixels are the boundary a reader
 * perceives** - so it is a seam between the image and the ground and not a
 * control's edge. color-mix rather than an rgba() literal, which this app
 * may not type (test/style.test.ts). */
.plate {
  margin: 24px 0 0;
  border: 1px solid color-mix(in srgb, var(--hx-ink-ground) 30%, transparent);
  border-radius: 13px;
  overflow: hidden;
  /* A figure carries no indent of its own; the band's inset is the page's. */
  padding: 0;
  line-height: 0;
}
.plate img { display: block; width: 100%; }

/* ---------------------------------------------------------------------------
   The three borrowed band shapes, from brakepoint/apps/marketing read on
   17/09/2026. src/bands.ts carries the account of what was adopted, what was
   adapted and what was dropped; this is only how each one is drawn.

   The thing being adopted is the **rhythm**, and it is a rhythm because it has
   accents in it: one metronome band repeated, broken twice. Before this the
   site had one shape at one width, so eight sections were eight identical
   bands - correct, and with no shape to it at all.

   None of the three needs a media query. The figures strip and the cards grid
   both change column count through the grid itself, which is what keeps
   test/style.test.ts's "only the two declared breakpoints" true.
   --------------------------------------------------------------------------- */

/* The percussive break: a thin strip of what the world is made of, two cells
 * on a phone and four above, with a rule above and below it.
 *
 * It carries a fraction of a band's own padding - the borrowed page runs its
 * stats bar at 32 against a 80 metronome, and this is the same proportion of
 * this site's 24-to-48 - so the strip reads as a hairline between two sections
 * rather than as a section of its own.
 *
 * The rules are the plate's edge idiom and not Filet: Filet is a light rule for
 * a light panel and vanishes on the ground (test/style.test.ts measures both).
 * Decorative either way - the cells' own alignment is what a reader perceives -
 * so it is a seam and not a control's boundary. */
/* Weighted as .sections section.band-figures rather than .band-figures, and
 * the reason is arithmetic: .sections section:first-of-type already sets a
 * padding-top, and the hero is a div - so on the home page the figures strip
 * **is** the first section element and would inherit the full band's top
 * padding. Selector weight is the fix rather than source order, which a later
 * edit moves.
 *
 * No backtick appears in any comment inside this template literal, here or
 * below: one terminates the string, and the failure is seven TS1005s pointing
 * at the CSS rather than at the quote that caused it. */
.sections section.band-figures {
  padding: clamp(10px, 2.09px + 2.029vw, 24px) 0;
  border-top: 1px solid color-mix(in srgb, var(--hx-ink-ground) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--hx-ink-ground) 30%, transparent);
}
/* Its heading is set as a kicker rather than as a title. The borrowed page's
 * stats bar has no heading at all, and this layout's machinery gives every
 * section one - a kicker is what lets the band keep a real heading in the
 * outline while still reading as a label over a row of cells. */
.sections .band-figures h2 {
  font-family: 'Karla', 'Avenir Next', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--hx-ink-ground);
  margin: 0 0 10px;
}
.figures ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
/* hyphens: manual for the cards' reason, and it was the same measured defect:
 * a 244 px cell broke "distance" as "dis-tance" on the French page at 1280. */
.figures li {
  color: var(--hx-ink-ground);
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  hyphens: manual;
}
/* The figure itself, and it is a **typographic** accent rather than a coloured
 * one. The borrowed page sets its stat values in its primary blue; here the
 * accent is reserved for a link, because this site's own rule is that colour is
 * never the only signal - a number in the link colour is a number somebody
 * tries to click. The display face at the num scale does the same work. */
.figures strong {
  display: block;
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(26px, 22.61px + 0.870vw, 32px);
  line-height: 1.1;
  color: var(--hx-ink-ground-strong);
  margin-bottom: 4px;
}

/* Where the scroll fans open: the only grid of more than two things on the
 * site, at the full reading column while every row band's prose is capped at
 * the 60ch panel measure. That difference is the whole of the effect - the
 * borrowed page steps its container from 1024 up to 1280 here, and this site
 * has one maximum it is not reopening.
 *
 * The card is the lighter of the two card treatments that page has: its
 * "disciplines" trio, which is a surface, a radius and a heading with no icon
 * tile and no hover state. **The icon tile was dropped with no substitute** -
 * there is no icon set, and docs/logo.md section 1 says an empty hexagon is the
 * credit glyph, so improvising three glyphs is a licence to draw the one shape
 * the identity may not be. */
.cards ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(332px, 1fr));
  gap: 24px;
}
/* The body is a step down from prose, and hyphenation is off. Both are about
 * the same fact: a card is about 285 px of text at 1080, which is the
 * narrowest measure on the site by a wide margin - half the 60ch a panel gets.
 *
 * The step down is the borrowed page's own proportion: its cards run text-sm
 * where its prose runs text-base, and the note size is what this scale has in
 * that position (it is also the figures strip's label size, which is the same
 * job - supporting text inside a grid cell).
 *
 * hyphens: manual is the heading rule's argument arriving somewhere new, and it
 * was a measured defect rather than a precaution. The document keeps
 * hyphens: auto because French prose at a phone's 358 px genuinely needs it -
 * but at a card's measure the browser broke "always" as "al-ways" on the
 * English page and "reprends" as "re-prends" on the French one, in the same
 * card, and a hyphen inside a short word reads as a mistake rather than as
 * typography. Measured at 1280, 17/09/2026. The cards have spaces to break at,
 * and body's overflow-wrap still catches a token that genuinely cannot fit. */
.cards li {
  background: var(--hx-plank-bg);
  color: var(--hx-ink-body, #2c2823);
  border-radius: 13px;
  padding: 14px;
  margin: 0;
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  hyphens: manual;
}
/* The card's title, whether or not it is also the link out. A card whose title
 * is a link is this page's router, which is the job the borrowed page gives its
 * feature grid; the strong tag is inside the anchor, so the link's accessible
 * name is the title and there is no second "read more" for a screen reader to
 * announce without context. */
.cards strong {
  display: block;
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(16px, 13.74px + 0.580vw, 20px);
  line-height: 1.1;
  color: var(--hx-ink-strong, #141210);
  margin-bottom: 8px;
}
/* The router's own targets, and this band is the only router on the page.
 *
 * They were plain inline anchors wrapping a block title, so the hit box was the
 * title's line box and nothing else: 18 px tall at 390 and 22 at 1280. That is
 * under WCAG 2.2 SC 2.5.8's 24 px minimum at both widths, and under this site's
 * own floor - TAP_TARGET is given to all five rail links and to the footer's,
 * so the card band was the one navigation on the site that did not get it.
 * Measured in a browser, 17/09/2026.
 *
 * The title centres in the target rather than sitting at its top, so the air
 * the box adds is shared above and below and the card does not gain a gap under
 * its heading. The strong's own margin goes, because the target supplies it. */
.cards a {
  display: flex;
  align-items: center;
  min-height: 44px;
  /* **The panel rule reaches this link too, and it had been missed.**
   *
   * A card is Email, and the global a rule paints Laiton - so the underline came
   * out at 1.75:1 on it, below even the brass this site refuses at 1.57 and
   * nowhere near the 3:1 a boundary a visitor must perceive owes. The underline
   * is this link's only non-colour signal, because the strong inside paints the
   * glyphs INK_STRONG, which is exactly what a card title that is not a link
   * would get: an invisible underline leaves the page's only router with no
   * affordance at all. ACCENT_BORDER is 3.91:1 there, which is the measured
   * reason .paper a, .panel a and .closing a already use it. */
  color: var(--hx-ink-accent-wash, #181106);
  text-decoration-color: var(--hx-accent-border, #9a6d23);
  text-decoration-thickness: 1px;
}
.cards a:hover { text-decoration-thickness: 2px; }
.cards a strong { margin-bottom: 0; }

/* The close. An inset card, narrower than everything above it, with its own
 * padding - the slot the borrowed page fills with a subscription offer and a
 * second call to action below it.
 *
 * **It carries a sentence and no button, and that is the adaptation rather than
 * an omission.** That page has seven conversion points and six of them land on
 * the same waiting list; this one is an alpha with nothing for sale, no list and
 * nothing to reserve, so the visual budget spent there on "sign up now" is
 * spent here on saying there is nothing to sign up for. A funnel with no
 * product at the end would be the worst thing this band could be.
 *
 * Fiche rather than Émail, which is the token for a panel inside a panel and is
 * exactly what an inset card is. Both inks over it are measured pairs in
 * test/style.test.ts. */
.closing {
  max-width: 756px;
  background: var(--hx-card-bg);
  color: var(--hx-ink-body, #2c2823);
  border-radius: 13px;
  padding: 24px;
}
.closing h2 { color: var(--hx-ink-strong, #141210); margin-top: 0; }
.closing > :last-child { margin-bottom: 0; }
.closing a {
  color: var(--hx-ink-accent-wash, #181106);
  text-decoration-color: var(--hx-accent-border, #9a6d23);
  text-decoration-thickness: 1px;
}
.closing a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------------
   The hero.
   --------------------------------------------------------------------------- */

.hero { padding: 24px 0 0; }
.hero h1 {
  font-size: clamp(40px, 21.91px + 4.638vw, 72px);
  margin: 0 0 14px;
  /* Two lines at both ends: 28 characters of Bitter 700 at 40 px inside a
     358 px measure, and the same headline inside the text column at 72 px. */
  max-width: 16ch;
}
.hero .hero-body p {
  font-size: clamp(16px, 13.74px + 0.580vw, 20px);
  color: var(--hx-ink-ground);
  max-width: 34ch;
}
.hero .hero-body > :last-child { margin-bottom: 0; }
.hero .plate { margin-top: 24px; }
.hero .plate-bleed {
  /* The bleeding hero plate is the only one on the site that is not at 1:1: its
     subject is the planet, which reads at any scale, and an edge on something
     that runs off the viewport would be a frame with one side missing.

     Scoped to plate-bleed and not to every hero plate: a hero plate that is
     a UI capture is an ordinary plate that happens to be first, and it owes the
     same hairline and the same radius as the rest. */
  border-radius: 0;
  border: 0;
}

@media (min-width: 720px) {
  .rail-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .wordmark img, .wordmark-paper img { width: 160px; }
  .wordmark {
    padding-right: 11.05px;
  }
  main.reading { padding: 24px 16px; }
  .paper { padding: 24px; }
  .panel { padding: 24px; }
  .cards li { padding: 24px; }

  /* **The hero's type is re-anchored to this breakpoint, because this is where
     its column stops being the whole band.**
     
     Below 720 the hero is one stacked column and the headline has the full
     measure. At 720 it becomes two columns, and the text column is 292 px on a
     bleeding hero and 248 px beside a fixed figure column - while the clamp,
     anchored at 390, has grown the type to 55 px. Type growing as its box
     halves is the defect, and it was rendering: at 720 the French headline of
     /the-creatures broke inside a word, with no hyphen at all, because the
     heading rule sets hyphens: manual and overflow-wrap then breaks what
     cannot fit. "Rencontre" came out as "Rencontr" and "e". The home page and
     /the-world went to four lines of 55 px in a 292 px column at the same
     width. Measured in a browser, 17/09/2026.
     
     Anchoring the same two endpoints at 720 instead of 390 puts the headline
     back to the phone's measured 40 px exactly where the column collapses, and
     reaches the same 72 px at 1080 - so nothing at or above the reading width
     moves, and the design's fold arithmetic for 1280 is untouched. */
  .hero h1 { font-size: clamp(40px, -24.00px + 8.889vw, 72px); }
  /* The close gets the one padding step nobody else gets, which is what the
     borrowed page's own p-8 md:p-12 is doing inside its terminal card: a band
     that carries less vertical air than its neighbours earns it back inside the
     card, so the rhythm holds while the card reads as inset. */
  .closing { padding: 38px; }

  /* Two cells become four. The borrowed page's stats bar does exactly this
     (grid-cols-2 md:grid-cols-4), and it is the one grid here that is stated
     rather than fitted: four structural constants are four, and letting
     auto-fit choose three and then one would break a row that means "this is
     the whole list". */
  .figures ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* A section with a plate becomes a row: prose, then the figure column, which
     is exactly a 390 px plate and its two edges. */
  .band-inner.with-plate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 48px;
    align-items: start;
  }
  .band-inner.with-plate .plate { margin-top: 0; }

  /* The bleeding hero band, and it is hero-bleed rather than every hero.
     The text column is centred against the 1080 column's left edge and the
     plate runs to the viewport's right edge, so the crop is a horizon rather
     than a cut - which is what the seam gradient below finishes. One
     padding-left does the centring, so there is no negative margin and no third
     breakpoint: the same rule holds at 720 and at 1440.

     It applied to every hero, and two heroes are not this one. A hero with no
     plate got the 0.8fr column and 776 px of empty ground beside it; a hero
     whose plate is a UI capture got that capture stretched to the 1fr column.
     Both now fall through: no plate means one full column, and a UI hero plate
     takes the with-plate 392 px figure column, which is the same
     1:1 treatment every other plate on the site gets. */
  .hero .band-inner.hero-bleed {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    min-height: 620px;
    max-width: none;
    padding: 0 0 0 max(16px, calc((100vw - 1080px) / 2 + 16px));
  }
  .hero .plate-bleed {
    position: relative;
    align-self: stretch;
    min-height: 620px;
    margin: 0;
  }
  .hero .plate-bleed img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
  }
  /* The seam. Decorative, and aria-hidden by being a pseudo-element. */
  .hero .plate-bleed::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: linear-gradient(90deg, var(--hx-ground, #0a0c10), transparent);
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------
   The footer, and it is the first time it has had anything in it.

   nav.footer and nav.legal sat in the catalogue and a footer ul rule sat
   in this file, both unused, while /support and four published legal
   documents were linked from nowhere on the site. A store submission needs
   those links and a visitor who wants their account deleted needs them more.
   --------------------------------------------------------------------------- */

footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px;
  color: var(--hx-ink-dark-kicker);
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
}
footer nav { margin-bottom: 14px; }
footer h2 {
  font-size: clamp(14px, 12.30px + 0.435vw, 17px);
  font-family: 'Karla', 'Avenir Next', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hx-ink-dark-kicker);
  margin: 0 0 6px;
}
footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
footer p { margin: 0 0 6px; }

.locales { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }

/* Principle 3 is a CSS rule here and not only a copy rule: nothing on this site
   moves in order to be noticed, and what little moves at all stops on request. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
a, .rail a { transition: color 120ms cubic-bezier(0.22, 0.61, 0.36, 1); }