/* ==========================================================================
   Kaharagian Publication Number Catalogue
   Office of the Sovereign's Printer

   A national library catalogue, not a product page. The layout and the
   information structure follow Project Blacklight, the discovery platform the
   library world settled on: a search bar with a field selector, facets in a
   left column, numbered results with labelled fields, pagination above and
   below, and a record page whose metadata is label-then-value with a tools
   block beside it. The skin is not Blacklight's. It is this Principality's:
   Kaharagian red, a gold hairline, warm paper, Merriweather and Inter.

   The whole visual argument is carried by typography, spacing and horizontal
   rules. There are no cards, no gradients, no shadows, no animation, no badges,
   no pills, no rounded corners and no icon chips anywhere in this file, and
   nothing of that kind should be added.

   Kaharagian red carries meaning and is therefore rationed: the masthead rule,
   the footer rule, links, the primary button, the current nav item and the
   current pagination cell. That is the whole budget. Gold is a hairline under
   the masthead and nothing else; it fails contrast as text, so it never carries
   information.

   Three rules draw every line on this site and there are no others:

     Rule A  hairline       1px solid var(--rule)          dividers
     Rule B  section rule   2px solid var(--ink)           under an h2, under the toolbar
     Rule C  control border 1px solid var(--rule-control)  every interactive boundary

   plus two structural brand rules that are not dividers: the masthead's 3px red
   over a 1px gold hairline, and the footer's 3px red.

   This stylesheet is served as a static file rather than through the Next CSS
   pipeline, so that the 400 response emitted by middleware for a malformed
   number can link the same sheet and be the same service.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Self-hosted; font-display: optional so a slow face never repaints
   text that has already been read.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/merriweather-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/merriweather-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/merriweather-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/fonts/inter-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/inter-semibold.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Warm neutral ground. Paper, not screen white. */
  --paper: #fbf9f5;
  --paper-sunk: #f4f0e7;
  --surface: #ffffff;

  --ink: #1a1614;
  /* Contrast against --paper: muted 5.7:1, faint 5.0:1. Both clear WCAG AA for normal
     text, which matters because the faint tone carries result counts at 14px. An
     earlier, lighter #857b6e measured 3.9:1 and failed. */
  --ink-muted: #6b6257;
  --ink-faint: #746a5d;

  /* Kaharagian red. 7.1:1 on --paper. */
  --red: #ad0908;
  --red-dark: #7a0706;

  /* Gold is decoration only. Never text, never a status. One hairline, under the
     masthead, and nowhere else. */
  --gold: #febc0a;

  /* Rule A. A divider, about 1.9:1, which is right for a line between two rows and
     wrong for anything that has to be seen as a control. */
  --rule: #ded6c6;
  /* Not a border. This tone survives only as the colour of a glyph or a separator:
     the meta-line divider, the breadcrumb slash, the subject-list interpunct. */
  --rule-strong: #c4b9a3;
  /* Rule C. Any boundary that is the only thing telling a reader "this is a control"
     uses this tone: 3.6:1 on paper, 3.8:1 on white, 3.3:1 on the sunk ground, so it
     clears the 3:1 that WCAG 1.4.11 asks of a user-interface boundary. */
  --rule-control: #8d826b;

  --focus: #0a4fd6;

  --green: #1d6b3f;
  --amber-text: #6b4a00;

  --serif: 'Merriweather', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
    'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ------------------------------------------------------------------------
     Width. One custom property, set once per page type on <body>, consumed by
     one .container that the masthead, the nav, the search bar, the main content
     and the footer all use, so every band on a page shares one left edge and
     one right edge.

       56rem   the reading pages: home, about, browse, every error state. The
               content box is then --measure-full exactly.
       72rem   the two sidebar pages: /search and /{kpn}. 17rem of sidebar plus
               a 3rem gap still leaves the results a column wider than the
               reading measure, which is what stops every result title from
               wrapping to two lines.

     --measure       the reading measure. 34rem sets Merriweather at about
                     sixty-five characters to the line.
     --measure-full  exactly one and a half reading measures. Rules, headings,
                     listings and metadata rows run to this.
     ------------------------------------------------------------------------ */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --page-width: 56rem;
  --measure: 34rem;
  --measure-full: 51rem;

  /* ------------------------------------------------------------------------
     Type scale. One ladder, in pixels at the 16px root:

       13  14  15  16  18  21  24  28  34

     13/14/15 are the sans furniture: captions, metadata, navigation, labels.
     16 is the body. 18 is a lead line and a list-entry title. 21, 24, 28 and 34
     are headings. No rule in this file states a font-size as a raw length; if a
     size is wanted that is not here, the ladder is wrong and gets changed here.
     ------------------------------------------------------------------------ */
  --t-caption: 0.8125rem;
  --t-small: 0.875rem;
  --t-furniture: 0.9375rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-h3: 1.3125rem;
  --t-h2: 1.5rem;
  --t-h1-min: 1.75rem;
  --t-h1: 2.125rem;

  /* ------------------------------------------------------------------------
     Spacing. One 4px ladder. Every margin, padding and gap on this site is one
     of these eight values, so the gap between two things always says how far
     apart they are meant to be. The only exceptions are optical rather than
     structural: the padding inside a control, and the negative margin that
     grows a chip's remove target without growing the chip.
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
}

/* The two sidebar pages. Set on <body> by the layout, from the request path. */
body.page-wide {
  --page-width: 72rem;
}

/* An error state is a reading page whatever address it was reached at, so it takes the
   reading width. This has to be said here rather than on <body> by the layout, because
   the layout settles the width from the path before anything has asked the register
   whether there is a record behind it: /549-720-26-9999-9 is a record address until the
   lookup comes back empty. Without this the two 404 pages of one site sat at two
   different widths, with two different left edges under the same masthead. */
body:has(main .state) {
  --page-width: 56rem;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Links. Underlined by default: a catalogue is read, and colour alone is never
   the only signal that something is a link. This is the treatment for every
   link in running text, in metadata values, in breadcrumbs, in listings, in
   facets and in the tools block. There are exactly two deliberate exceptions,
   the nav item and the footer link, and each is written out below.
   -------------------------------------------------------------------------- */

a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.06em;
}

a:hover {
  color: var(--red-dark);
  text-decoration-thickness: 0.12em;
}

a:visited {
  color: #6d2b6b;
}

/* Every corner on this site is square, including this one. The ring is drawn outside
   the element, so no control sits flush against a container edge. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0;
}

::selection {
  background: var(--red);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #ffffff;
  padding: var(--space-3) 1.25rem;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* There is no second container. A page that narrowed its own main content while the
   masthead, the navigation and the search bar above it kept the body's width would have
   two left edges, which is the fault this property was introduced to end. Anything that
   needs to be narrower than its page is held by --measure or --measure-full, not by a
   container of its own. */

main {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-8);
}

/* Prose is a full-measure block whose reading matter is held to the reading measure. It
   is written this way round, rather than as a narrow box, so that a heading inside it can
   carry a rule across the full measure while the text under the rule keeps its column.
   Constraining the box instead would take the rules in with it and leave the right of the
   page with nothing on it at all.

   One selector list serves .prose and .state alike. Written as two near-identical lists,
   the .state one was missing dl, blockquote and .hint, so an error page that ever gained
   one would have run it the full width of the page. */
.prose,
.state {
  max-width: none;
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > blockquote,
.prose > figure,
.prose > .hint,
.state > p,
.state > ul,
.state > ol,
.state > dl,
.state > blockquote,
.state > figure,
.state > .hint {
  max-width: var(--measure);
}

.stack > * + * {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   The sidebar grid, shared by /search and /{kpn}

   The two pages Blacklight builds from one layout are built here from one
   layout too. The sidebar column is reserved whether or not it has content, so
   the results column never moves between one query and the next. Below the
   breakpoint it is one column with the sidebar first in source order.

   Both class names are answered because the two routes name it for themselves.
   -------------------------------------------------------------------------- */

.search-layout,
.record-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

/* Grid and flex children default to min-width: auto, which lets one wide descendant,
   a long select or an unbroken URL, push the whole track past the viewport. */
.search-layout > *,
.record-layout > * {
  min-width: 0;
}

@media (min-width: 64rem) {
  .search-layout,
  .record-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    column-gap: var(--space-7);
  }
}

/* Everything in a sidebar is furniture: sans, 15px. */
.facets,
.sidebar {
  font-family: var(--sans);
  font-size: var(--t-furniture);
}

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

/* No border of its own. The boundary under the masthead is the red rule, and a divider
   tone stacked immediately above it only muddied the first pixel of the red. */
.masthead {
  background: var(--surface);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: var(--space-5);
}

.masthead__arms {
  width: 3.75rem;
  flex: none;
}

.masthead__arms img {
  width: 100%;
}

.masthead__names {
  min-width: 0;
}

.masthead__body {
  font-family: var(--sans);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.masthead__service {
  font-family: var(--serif);
  font-size: clamp(var(--t-h3), 3.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0.2rem;
}

.masthead__service a {
  color: var(--ink);
  text-decoration: none;
}

.masthead__service a:hover {
  color: var(--red-dark);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* The one place gold appears: a hairline under the masthead, over the red. */
.masthead__rule {
  height: 3px;
  background: var(--red);
  border-bottom: 1px solid var(--gold);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--t-furniture);
  font-weight: 500;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  list-style: none;
  padding: 0;
}

.nav a {
  display: inline-block;
  padding-block: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav a:hover {
  color: var(--red-dark);
  border-bottom-color: var(--rule-strong);
}

.nav a[aria-current='page'] {
  color: var(--red-dark);
  border-bottom-color: var(--red);
}

/* --------------------------------------------------------------------------
   The search bar

   One search bar, in the chrome, on every page, as a discovery catalogue has.
   It is the only search box on the site: the six boxes and four labelling
   patterns it replaces said the same thing four ways and were four places to
   change one word.
   -------------------------------------------------------------------------- */

.search-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-4);
}

.search-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.search-bar input[type='search'] {
  flex: 1 1 14rem;
}

/* The selector sits between the field and the button, at its natural width. */
.search-bar select {
  flex: 0 0 auto;
  width: auto;
}

/* The way through to the advanced search sits after the button, in the same row. */
.search-bar__advanced {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  margin-left: var(--space-3);
}

/* On a phone the field takes the row, the selector takes the row under it, and the
   button takes the row under that. Left at their natural widths the three sat as small
   blocks against the left edge and the row read as broken rather than wrapped. */
@media (max-width: 30rem) {
  .search-bar select,
  .search-bar button {
    flex: 1 1 100%;
  }

  .search-bar__advanced {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  list-style: none;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: '/';
  color: var(--rule-strong);
  margin-right: var(--space-2);
}

/* --------------------------------------------------------------------------
   Headings

   Three treatments and no others.

     h1  the page title. No rule under it on any page, on any route, including
         the error states. It is closed by the standfirst or by the first
         section rule beneath it.
     h2  a section heading, on Rule B. There is no quiet variant: the record
         page's headings carry the same rule as the homepage's.
     h3  a sub-heading, on Rule A. Facet headings and result titles are not
         sub-headings and do not inherit this.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

h1,
.page-title {
  font-size: clamp(var(--t-h1-min), 4.5vw, var(--t-h1));
  margin-bottom: var(--space-3);
}

h2 {
  font-size: clamp(var(--t-h3), 2.6vw, var(--t-h2));
}

h3 {
  font-size: var(--t-lead);
}

h4 {
  font-size: var(--t-body);
}

/* A standfirst stays sentence case; it is a sentence, not a heading. */
.standfirst {
  font-family: var(--serif);
  font-size: var(--t-lead);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

/* A section heading sits on a rule that runs the full measure. This is the spine of every
   page, and it is what gives the text column under it a right-hand edge to sit against. */
.section {
  margin-top: var(--space-7);
}

.section > h2,
.prose > h2,
.state > h2,
.tools > h2 {
  font-size: clamp(var(--t-h3), 2.6vw, var(--t-h2));
  line-height: 1.2;
  color: var(--ink);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.25rem;
}

.prose > h2,
.state > h2 {
  margin-top: var(--space-7);
}

/* A sub-heading: record-group headings, About sub-headings, link-column headings. */
.section > h3,
.prose > h3,
.record-group > h3,
.link-columns h3 {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2);
}

.prose > h3,
.record-group > h3 {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Forms

   One field, one select, one primary button, one secondary button. Every one of
   them is 2.75rem tall, so a row of controls is a row and not a staircase.
   -------------------------------------------------------------------------- */

label,
.label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-furniture);
  margin-bottom: 0.375rem;
}

.hint {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

/* There is one search box on this site and it is the bar in the chrome. The wrapper,
   row and modifier classes a second, in-page search block used to need are gone with the
   block: the About page carried one under a heading that said the same words as the
   label above it, three inches under a bar that did the same job. */

input[type='text'],
input[type='search'],
select {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-control);
  border-radius: 0;
  padding: 0.625rem var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  appearance: none;
}

/* The caret is drawn from two gradients rather than an image, so the select carries no
   asset and no dependency. */
select {
  padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 1.15rem, calc(100% - 0.7rem) 1.15rem;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.button,
button {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  color: #ffffff;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 0;
  padding: 0.625rem 1.25rem;
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button:hover,
button:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #ffffff;
}

/* One secondary treatment everywhere: Download the PDF, Copy Citation, Apply. */
.button--secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-control);
  font-weight: 500;
}

.button--secondary:hover {
  background: var(--paper-sunk);
  color: var(--ink);
  border-color: var(--ink);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Controls are not disabled on this site; they are omitted. Previous and Next are absent
   at the ends of a run rather than greyed, and Apply is always live. If a disabled
   control ever becomes genuinely necessary this is what it looks like, and it carries
   aria-disabled rather than the disabled attribute so it stays reachable by keyboard. */
[aria-disabled='true'] {
  opacity: 1;
  color: var(--ink-faint);
  background: var(--paper-sunk);
  border-color: var(--rule);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Result list

   An ordered list, numbered, with the count continued across pages by the
   list's own start attribute. Rules between entries, no boxes.
   -------------------------------------------------------------------------- */

/* The list is an <ol> and carries start={from}, so the document's own numbering
   continues across pages. The drawn figure is a counter of this sheet's own rather than
   the list-item counter, because a row laid out as a grid is no longer display:list-item
   and stops incrementing that one. The page offset therefore comes in as an inline
   counter-reset on the list:

     <ol className="results" start={from} style={{ counterReset: `result ${from - 1}` }}>

   Without it the figures simply start at 1, which is right on page one and on the
   homepage listing. */
.results {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: result 0;
}

.result {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--rule);
  counter-increment: result;
}

/* Everything the row holds sits in the text column; the number occupies the first. */
.result > * {
  grid-column: 2;
}

/* The number is generated, so it is not in the accessibility tree twice: the ordered
   list already numbers itself for anything reading the page aloud. */
.result::before {
  content: counter(result) '.';
  grid-column: 1;
  grid-row: 1;
  font-family: var(--sans);
  font-size: var(--t-furniture);
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.5;
}

/* With a first-page thumbnail the row grows a third column. The text of the row is
   wrapped in .result__body so the image occupies one cell beside the whole of it rather
   than one cell beside the title, which would push the subtitle down by the height of
   the picture. */
.result--thumb {
  grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr);
}

.result--thumb > * {
  grid-column: 3;
}

.result--thumb > .result__thumb {
  grid-column: 2;
  grid-row: 1;
}

.result__thumb img,
.result__thumb {
  border-radius: 0;
}

.result__thumb img {
  border: 1px solid var(--rule);
  width: 100%;
  height: auto;
}

.result__title {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.result__subtitle {
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-2);
}

/* The quiet line of detail under an entry in a listing, wherever a listing appears: the
   labelled fields under a search result, and the detail and count under a browse row.
   One selector list, so the two lists of the same register seen along different axes are
   provably one treatment and not two that happen to look alike.

   One item to a line, at every width. This is the shape Blacklight gives a result's
   labelled fields and it is the only shape that keeps the invariant the rule system
   states — a divider is never the first mark on a line at any width.

   A wrapping flex row with a border-left divider cannot keep that promise. Withholding
   the divider below 40rem only moves the fault: at 1280 the results column is about
   47rem, five labelled fields do not fit on one line, the row wraps, and the second line
   opens with a rule hanging off the front of it. That was the defect on the live site,
   and it is a property of wrapping plus a leading border, not of narrow screens. Five
   fields on five lines also read faster in a column this width than five fields chased
   across two, which is the whole purpose of the labelled list — and once the results
   read this way, a browse row ruled into one line was the same element set two ways on
   one site. */
.meta-line,
.browse-list__meta {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: var(--measure);
  list-style: none;
  padding: 0;
}

.meta-line > li,
.browse-list__body,
.browse-list__count {
  display: block;
}

.meta-line > li + li,
.browse-list__body + .browse-list__count {
  margin-top: 0.15rem;
}

/* The label half of a labelled field. A count is the same weight as a value: it is what
   the row is worth, not what the row is called. */
.meta-line b,
.meta-line strong,
.meta-line .meta-line__label {
  font-weight: 600;
  font-style: normal;
}

.browse-list__count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The publication number as data

   One class, at whatever size its context sets, and two size modifiers.
   -------------------------------------------------------------------------- */

.kpn {
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.kpn--hero {
  display: block;
  font-size: clamp(var(--t-h2), 3.6vw, var(--t-h1));
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* On an error page the string may be arbitrary input, so it is allowed to break. */
.state .kpn,
.kpn--input {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Results toolbar: the range count, the sort and the number per page
   -------------------------------------------------------------------------- */

.result-summary {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}

.result-summary__count {
  font-variant-numeric: tabular-nums;
}

/* One form, two selects, one Apply. No select navigates on change: an onchange jump is
   unusable with a keyboard, because moving through the options fires it at every option
   passed. */
.sort-form,
.toolbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
}

.sort-form label,
.toolbar-form label {
  margin-bottom: 0;
  font-weight: 500;
  white-space: nowrap;
}

/* A select is sized by its longest option, which here is "Publication Date, Newest
   First". Left to itself that sets a min-content width wide enough to push a phone
   viewport sideways, so it is allowed to shrink and the row is allowed to wrap. */
.sort-form select,
.toolbar-form select {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
}

/* --------------------------------------------------------------------------
   Facets

   One heading for the panel, said once, and it is hidden: each facet already
   names itself. Every facet is a disclosure, open at every width, so a phone
   can fold away four facets and a dozen values that would otherwise sit between
   the reader and the first result.
   -------------------------------------------------------------------------- */

.facet + .facet {
  margin-top: var(--space-5);
}

.facet > details > summary,
.facet h3 {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.facet > details > summary {
  cursor: pointer;
}

/* A heading inside the summary carries the words; the summary carries the box, so the
   heading must not draw the rule a second time. */
.facet summary h3 {
  display: inline;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

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

.facet li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  min-height: 1.5rem;
}

/* A facet value is a plain link, in the site's one link treatment. It used to be the
   single place the system abandoned that rule, in ink with a border under it. */
.facet a {
  font-size: var(--t-furniture);
}

/* A value already applied is not a link. It is stated, and it is removed from the row of
   applied filters above the results. */
.facet__selected {
  font-weight: 600;
  color: var(--ink);
}

.facet__count {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.facet__more {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Applied filters

   A chip is a rectangle, not a pill, and its remove control is a target of
   twenty-four pixels in each direction without the chip growing to match.
   -------------------------------------------------------------------------- */

.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
}

/* The lead-in repeats the list's own accessible name, so it is spoken once and read
   twice rather than announced twice. */
.chips-row__lead {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink);
  border: 1px solid var(--rule-control);
  border-radius: 0;
  background: var(--surface);
  padding: var(--space-1) var(--space-2) var(--space-1) 0.625rem;
}

.chip__key {
  color: var(--ink-muted);
}

/* The remove link is a single glyph, which left to itself is a target of about sixteen
   pixels by twenty. WCAG 2.2 asks for twenty-four in each direction, so the box is grown
   to that and the extra height is pulled back out with a negative margin, which keeps the
   chip the size it was while the thing a finger has to hit gets bigger. */
.chip a {
  color: var(--red-dark);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-block: -0.25rem;
}

.chip a:hover {
  text-decoration: underline;
}

.chips__clear {
  font-family: var(--sans);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------------------
   Pagination. Rendered above the results and below them, from one component.
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--sans);
  font-size: var(--t-furniture);
  list-style: none;
  padding: 0;
}

.pagination--above {
  margin-bottom: var(--space-5);
}

.pagination--below {
  margin-top: var(--space-6);
}

/* Direct children only. A page number can carry a nested span that exists solely to be
   read aloud, and a descendant selector here would give that span a border and a
   2.5rem min-width, which is exactly wide enough to escape the clip that hides it. */
.pagination li > a,
.pagination li > span {
  display: inline-block;
  min-width: 2.5rem;
  text-align: center;
  padding: 0.4rem 0.6rem;
  /* The box is the only thing that says these numbers are controls, so it is held to
     the 3:1 that WCAG 1.4.11 asks of a control boundary rather than to the rule tone. */
  border: 1px solid var(--rule-control);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pagination a:hover {
  border-color: var(--ink);
  color: var(--red-dark);
}

.pagination [aria-current='page'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  font-weight: 600;
}

/* The break between page runs. It is its own list item rather than a span sharing an
   item with a page number, so the list is a list of one thing per item, and it is hidden
   from assistive technology because an ellipsis read aloud between two numbers is noise. */
.pagination .is-gap {
  border: 0;
  min-width: 1rem;
  text-align: center;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Advanced search

   One labelled control to a row, every control the same width, so the labels
   form one column and the fields form another. The controls are held to the
   reading measure rather than run to the full one: a select whose longest
   option is "Foreign Policy and Diplomatic Memoranda" does not need fifty
   ems, and a row of empty box stretching past the text is what makes a form
   look like it was never laid out.
   -------------------------------------------------------------------------- */

.advanced-search {
  max-width: var(--measure);
}

.advanced-search__field + .advanced-search__field {
  margin-top: var(--space-4);
}

/* A label here is the label every other field on the site has, at the spacing every
   other field on the site gives it. This block used to shave it to 0.25rem, which made
   the advanced search the one page where a label sat closer to its control than the
   label on the bar directly above it. */

.advanced-search__actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Record page
   -------------------------------------------------------------------------- */

/* The title block is closed by a hairline, and the number sits under it as the anchor of
   the page: the largest line after the title, in tabular figures so the groups line up,
   and in ink rather than red. Red on this page is spent on links and on the one primary
   action, which is the whole of its budget. */
.record__kpn {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

/* The words under the number caption it, the way a plate is captioned. They follow the
   thing they name rather than sitting over it, so this is not the tracked-caps kicker the
   house style rules out; it is not tracked and it is not caps either. */
.record__kpn-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.record__subtitle {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.record__byline {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* A note under a section is ordinary body text held to the reading measure, not sans
   furniture: a link inside it must not change family halfway down a page. */
.record__note {
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* The first section of the record starts level with the top of the sidebar beside it.
   The distance between the two columns is the grid's to set, and a section margin on top
   of it opened a hole between the number and the first heading under it. */
.record > .section:first-child {
  margin-top: 0;
}

.record-group + .record-group {
  margin-top: var(--space-6);
}

.record-group .metadata {
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   The tools block and the first-page preview, in the record page sidebar
   -------------------------------------------------------------------------- */

/* Hairline, no shadow, no rounded corner, no tilt, no hover effect. Real width and
   height attributes belong on the element itself so nothing reflows around it.

   The picture is the width of the sidebar at every viewport, not the width of whatever
   holds it. Below the breakpoint the sidebar is the whole page, and left at 100% the
   first page of the document became a half-metre-tall plate standing between the number
   and the record it belongs to. */
.preview img,
img.preview {
  border: 1px solid var(--rule);
  border-radius: 0;
  display: block;
  height: auto;
  max-width: min(100%, 17rem);
}

.tools {
  margin-top: var(--space-6);
}

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

.tools li + li {
  border-top: 1px solid var(--rule);
}

.tools li > a {
  display: block;
  padding-block: 0.625rem;
  font-family: var(--sans);
  font-size: var(--t-furniture);
}

/* The way back to the results, under the tools. */
.back-link {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Status notices. Never colour alone: each carries a word.
   -------------------------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--ink-muted);
  background: var(--paper-sunk);
  padding: 0.875rem 1.125rem;
  margin-block: var(--space-5);
  font-family: var(--sans);
  font-size: var(--t-furniture);
  max-width: var(--measure);
}

.notice strong {
  font-weight: 600;
}

.notice--superseded {
  border-left-color: var(--amber-text);
}

/* No tint. The word "Withdrawn." in bold carries the meaning, and colour is never the
   only signal that a publication has been withdrawn. */
.notice--withdrawn {
  border-left-color: var(--red);
}

.notice--registered {
  border-left-color: var(--ink-muted);
}

/* There is no status badge. A status is a word in a metadata row and, where it changes
   whether a reader should rely on the document, a notice; the bordered chip that used to
   be declared here was a badge, which the house style rules out, and it was the last
   border on the site drawn in the separator tone. */

/* --------------------------------------------------------------------------
   Metadata: label then value, a light label column and a value column.
   Not a heavy ruled table, and not a card.
   -------------------------------------------------------------------------- */

.metadata {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.metadata > div {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 0.15rem var(--space-5);
}

.metadata > div:last-child {
  border-bottom: 0;
}

/* The label column is fixed and the value column takes what is left, so every label in
   every group starts at the same rule and every value starts at the same one, down the
   whole record. 14rem is what the longest label, "Permanent Catalogue Address", needs to
   stay on one line at this size. The row and its rule run the full measure while the
   value is held to the reading measure, so the rules stay in register with the section
   rule above them. */
@media (min-width: 40rem) {
  .metadata > div {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.metadata dt {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  font-weight: 600;
  color: var(--ink-muted);
  /* The label is a smaller face than the value beside it, so its first line sits a
     little high. The extra leading drops it onto the same baseline. */
  line-height: 1.7;
}

/* Stacked, the pair is one unit and the loose leading that aligned two columns only
   opens a gap between a label and the value under it. */
@media (max-width: 39.999rem) {
  .metadata dt {
    line-height: 1.4;
    margin-bottom: 0.15rem;
  }
}

.metadata dd {
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink);
  margin: 0;
  min-width: 0;
  max-width: var(--measure);
  overflow-wrap: break-word;
}

/* A recorded URL can be longer than the column, and has no spaces to break at. Break it
   anywhere rather than let it push the page sideways on a narrow screen. */
.metadata dd a {
  overflow-wrap: anywhere;
}

.metadata dd ul {
  list-style: none;
  padding: 0;
}

.metadata dd li + li {
  margin-top: var(--space-1);
}

/* Inline subject links read as a list, not as buttons.

   The interpunct trails the subject it follows rather than leading the one it precedes.
   Written the other way round it was a mark hanging off the front of a line every time
   the list wrapped, which is the same defect the result metadata line carries when its
   divider is allowed to start a line: a separator is never the first mark on a line. */
.subject-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  list-style: none;
  padding: 0;
}

.subject-list li:not(:last-child)::after {
  content: '·';
  color: var(--rule-strong);
  margin-left: var(--space-2);
}

/* A checksum is compared against another one character by character, so the eight groups
   are set as a fixed block of four columns rather than left to wrap wherever the column
   ends. Two rows of four line up under each other and can be read across or down; six and
   then two cannot. The groups carry no whitespace in the markup, so a selection of the
   block still copies the un-grouped sixty-four characters. */
.checksum {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 0.15rem var(--space-4);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Under about 384px four groups no longer fit the column, so the block becomes two by
   four rather than overflowing the page. */
@media (max-width: 24rem) {
  .checksum {
    grid-template-columns: repeat(2, max-content);
  }
}

/* --------------------------------------------------------------------------
   Citation

   Not a box. It sits on the page between two hairlines. The read-only field is
   the no-scripting copy mechanism and stays a field; the button beside it is an
   enhancement, not the mechanism.
   -------------------------------------------------------------------------- */

.citation {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-4);
}

/* The field is sized to the citation it holds and never scrolls: a citation that has been
   clipped is not a citation, and a scrollbar inside a page of type is a box. Browsers that
   understand field-sizing fit it exactly at whatever width the column happens to be; the
   rest fall back to the row count the component calculates, which is sized for the
   narrowest screen and is therefore generous on a wide one. */
.citation__text {
  font-family: var(--serif);
  font-size: var(--t-furniture);
  line-height: 1.65;
  width: 100%;
  min-height: 5.5rem;
  field-sizing: content;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  resize: none;
  overflow: hidden;
}

.copy-status {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--green);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Definition lists in prose (the About page)
   -------------------------------------------------------------------------- */

/* The five groups of a number, as a ruled list. It is a listing, so its rules run the
   full measure like every other rule on the page and the gloss under each group keeps
   the reading measure. */
.anatomy,
.prose > .anatomy {
  border-top: 1px solid var(--rule);
  max-width: var(--measure-full);
}

.anatomy > div {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 34rem) {
  .anatomy > div {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

/* The same label-then-value construction as the record page, differing only in the width
   of the label column, because the two hold different content. */
.anatomy dt {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  font-weight: 600;
  color: var(--ink-muted);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

@media (max-width: 33.999rem) {
  .anatomy dt {
    line-height: 1.4;
    margin-bottom: 0.15rem;
  }
}

.anatomy dd {
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink);
  margin: 0;
  min-width: 0;
  max-width: var(--measure);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Browse listings

   Identical anatomy to a search result row and identical treatment. The whole
   row is not one anchor: only the name is the link, so the detail line stays
   selectable.
   -------------------------------------------------------------------------- */

.browse-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.browse-list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.browse-list__name {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  max-width: var(--measure);
  margin-bottom: var(--space-1);
}

/* The detail line under a browse row is the result metadata line: one treatment, written
   once, in the .meta-line block above. */

/* The other axes, under the listing. Set in columns rather than as one rule-separated
   line: that line wrapped on a narrow screen and left a divider hanging off the front of
   the second row, in front of a link, saying nothing. */
.browse-more {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.625rem var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  max-width: var(--measure-full);
}

/* The line under a listing that leads to the whole of it. */
.more-link {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  margin-top: var(--space-5);
}

/* Columns of links: the four axes of the catalogue on the homepage. Each is a
   sub-heading with its gloss under it, so four entries read as one table of contents
   rather than as four unrelated lines. */
.link-columns {
  display: grid;
  gap: var(--space-5) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Four items read better as a square than as three across and one orphaned below. */
@media (min-width: 48rem) {
  .link-columns--pairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.link-columns h3 {
  margin-top: 0;
}

.link-columns p {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-muted);
  max-width: var(--measure);
}

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

/* One rule for every gap between two blocks of prose, rather than a list of the pairs
   somebody thought of. The list missed blockquote, so on the About page the paragraph
   after the specimen citation sat flush against it. */
.prose > * + * {
  margin-top: var(--space-4);
}

/* A prose block that is only the body of a section already has its ruled heading above
   it, outside the block, so its first paragraph starts at the top. A heading is exempt:
   the About page breaks its prose around the anatomy list and resumes with a subheading,
   and zeroing that put the subheading's rule hard against the bottom of the list. */
.prose > :first-child:not(h2):not(h3) {
  margin-top: 0;
}

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

.prose li + li {
  margin-top: 0.375rem;
}

/* The only thing set as code on this site is a publication number, so it is sized
   relative to the sentence around it rather than off the ladder, and it does not break:
   a number wrapped after its second group reads as two numbers. */
.prose code {
  font-family: var(--sans);
  font-size: 0.9375em;
  font-variant-numeric: tabular-nums;
  background: var(--paper-sunk);
  padding: 0.1em 0.3em;
  border: 1px solid var(--rule);
  white-space: nowrap;
}

blockquote {
  border-left: 3px solid var(--rule-strong);
  padding-left: var(--space-4);
  color: var(--ink-muted);
  font-style: italic;
}

.prose > blockquote {
  margin-block: 1.25rem;
}

/* --------------------------------------------------------------------------
   Empty states and error states

   One block, used inside the results column and on the browse pages alike, and
   the error pages are composed like any other page here: full masthead, full
   nav, breadcrumbs, full footer. Nothing is a narrow apology floated in the
   middle of nothing.
   -------------------------------------------------------------------------- */

.empty {
  padding-block: var(--space-6);
}

/* The statement of what was not found. */
.empty > p:first-child,
.empty__lead {
  font-family: var(--serif);
  font-size: var(--t-lead);
  color: var(--ink);
  max-width: var(--measure);
}

/* What to do next. */
.empty > p + p {
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

.state p + p {
  margin-top: var(--space-4);
}

/* The closing row of ways out. It is separated from what precedes it by a rule, so it
   reads as the foot of the page rather than as one more sentence. */
.ways,
.empty > .ways,
.state > .ways {
  font-family: var(--sans);
  font-size: var(--t-furniture);
  max-width: var(--measure-full);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.empty > .ways {
  margin-top: var(--space-5);
}

.ways .sep {
  color: var(--rule-strong);
}

.state > .button-row {
  margin-top: var(--space-6);
}

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

   The imprint, and nothing else. Navigation belongs in the nav and in the
   browse pages, not in a three-column rail at the bottom of every page.
   -------------------------------------------------------------------------- */

/* Red at 3px closes the sheet at the bottom exactly as it opens it at the top. The gold
   hairline is not repeated here: under the masthead it belongs to the arms above it, and
   a second one down here would be decoration with nothing to be about. */
.footer {
  flex: none;
  background: var(--surface);
  border-top: 3px solid var(--red);
  padding-block: var(--space-6);
  font-family: var(--sans);
  font-size: var(--t-furniture);
  color: var(--ink-muted);
}

/* The measure is set on the second paragraph rather than on the block. The imprint is
   one line of record, not prose, and at the reading measure it broke after "The Prince
   of" and left the Principality on a line of its own; the explanatory paragraph under it
   is prose and stays in the column. */
.footer__notice p + p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.footer a {
  color: var(--ink);
}

.footer a:hover {
  color: var(--red-dark);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--ink-muted);
}

/* The interpunct between two links in a row of ways out. A separator, not a word: it is
   the same tone as the breadcrumb slash and the subject-list interpunct. */
.sep {
  color: var(--rule-strong);
}

.sans {
  font-family: var(--sans);
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@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;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .nav,
  .search-bar,
  .facets,
  .pagination,
  .skip-link,
  .button-row,
  .tools,
  .breadcrumbs {
    display: none;
  }

  a {
    color: #000000;
    text-decoration: none;
  }

  /* A printed record still carries its own address, but not from here: the Read and
     Download links are inside the tools block and are hidden above, so a rule printing
     their href never fired. The address is printed by the Permanent Catalogue Address
     row of the metadata list, where the link text is the address itself. */

  .footer {
    border-top: 1px solid #000000;
  }
}