/* ==============================================================================
   Yashil moliya va innovatsion iqtisodiyot — design system
   ------------------------------------------------------------------------------
   The page is set like a printed learned journal: a warm paper ground, a ruled
   masthead, a label column running down the left of every section, and only two
   dark registers per page. Colour carries structure, never decoration.

   Type       EB Garamond  display, wordmark, issue plate
              Literata     reading text — standfirsts, prose, article titles
              Manrope      interface only — labels, navigation, metadata
   Rules      3px  section and masthead closers
              1px  everything else, in --rule
   Layout     fluid first; the media queries at the foot only fix what clamp()
              and intrinsic grids cannot express on their own.
   ============================================================================ */

:root {
  color-scheme: light;

  /* -- Ground ---------------------------------------------------------- */
  --paper:      #fcfbf7;   /* the page itself: warm, never pure white */
  --paper-raise:#ffffff;   /* cards and plates that sit above it */
  --paper-tint: #f4f2e9;   /* alternating section bands */
  --paper-deep: #efece0;   /* wells, search fields, quiet blocks */

  /* -- Ink ------------------------------------------------------------- */
  --ink:        #14201a;
  --ink-2:      #3c4a42;   /* secondary prose */
  --ink-3:      #5d6a62;   /* metadata */
  --ink-4:      #7b857d;   /* the quietest legible grey on paper */

  /* -- Rules ----------------------------------------------------------- */
  --rule:       #ded9ca;
  --rule-firm:  #c6c0ae;
  --rule-dark:  rgba(246,242,230,.20);

  /* -- Green ----------------------------------------------------------- */
  --g-950:      #051a13;
  --g-900:      #06231a;
  --g-800:      #0b3b2a;
  --g-700:      #124c36;   /* the emblem's own green */
  --g-600:      #1a6446;
  --g-500:      #2a8259;
  --g-300:      #7fb298;
  --g-200:      #b3d2c1;
  --g-100:      #dbe9e1;
  --g-050:      #eef4f0;

  /* -- Brass ----------------------------------------------------------- */
  --brass:      #8a6a22;   /* passes AA on paper at small sizes */
  --brass-2:    #a07c2c;
  --brass-3:    #c6a052;
  --foil:       #e3c888;   /* only ever on a dark ground */

  /* -- Elevation ------------------------------------------------------- */
  --lift:       0 1px 2px rgba(6,35,26,.05), 0 12px 28px -20px rgba(6,35,26,.42);
  --lift-plate: 0 2px 3px rgba(6,35,26,.10), 0 26px 50px -28px rgba(6,35,26,.55);

  /* -- Metrics --------------------------------------------------------- */
  --maxw:       1240px;
  --gutter:     clamp(1.15rem, 4vw, 3.25rem);
  --band:       clamp(3.5rem, 7vw, 7rem);   /* vertical rhythm of a section */
  --rail:       13.5rem;                    /* the label column */
  --radius:     3px;
  --tap:        44px;

  /* -- Type ------------------------------------------------------------ */
  --display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --serif:   'Literata', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.9375rem, .905rem + .14vw, 1rem);
  line-height: 1.62;
  /* `hidden` would make the body its own scrolling box and break every
     position:sticky inside it; `clip` cuts the overflow without doing that. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  font-variant-ligatures: common-ligatures;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--display);
  font-weight: 550;
  line-height: 1.12;
  letter-spacing: -.006em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; }
figure, blockquote, fieldset { margin: 0; padding: 0; border: 0; }

a {
  color: var(--g-700);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background-color .18s var(--ease);
}

/* Every link says so under the pointer. A colour change alone is not a reliable
   signal — it is invisible to a good number of readers and ambiguous to the
   rest — so the rule is: if it is a link, it underlines on hover. */
a:hover, a:focus-visible { text-decoration: underline; }

/* Except where the affordance is already unmistakable, or where the anchor
   wraps a whole block and underlining all of it would be noise. Those cases
   underline the one line that names the target instead. */
.btn:hover, .btn:focus-visible,
.brand:hover, .brand:focus-visible,
.skip-link:hover, .skip-link:focus-visible,
.nav__link:hover, .nav__link:focus-visible,
.viewer__btn:hover, .viewer__btn:focus-visible,
.toc__page:hover, .toc__page:focus-visible,
.toc__link:hover, .toc__link:focus-visible,
.drawer__link:hover, .drawer__link:focus-visible,
.artnav__link:hover, .artnav__link:focus-visible,
.qs__row:hover, .qs__row:focus-visible,
.map__node:hover, .map__node:focus-visible { text-decoration: none; }

.toc__link:hover .toc__title,
.toc__link:focus-visible .toc__title,
.drawer__link:hover .swap__on,
.drawer__link:focus-visible .swap__on,
.artnav__link:hover .artnav__title,
.artnav__link:focus-visible .artnav__title,
.qs__row[aria-selected="true"] .qs__title { text-decoration: underline; }

/* Links that already carry a permanent underline swap it for a firmer one
   rather than drawing a second. */
.prose a:hover, .contact-row__val a:hover { text-decoration: none; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--g-600);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--g-200); color: var(--g-900); }

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

/* Long unbroken titles must not push the page sideways. */
.container > *, .split > *, .sec-split > *, .grid > *, .hero__inner > * { min-width: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: .85rem 1.25rem;
  background: var(--g-800);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ==============================================================================
   Typographic devices
   ------------------------------------------------------------------------------
   Five of them carry the whole site: eyebrow, display heading, lede, prose and
   the label. Everything else is a composition of these.
   ============================================================================ */

/* The uppercase strapline that opens a section. */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow--light { color: var(--foil); }

/* Metadata labels inside rails, cards and captions. */
.label {
  display: block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.label--light { color: var(--g-300); }

.display {
  font-size: clamp(2.35rem, 1.55rem + 3.3vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -.018em;
}

.h1 { font-size: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem);   line-height: 1.07; }
.h2 { font-size: clamp(1.7rem, 1.32rem + 1.7vw, 2.625rem); line-height: 1.12; }
.h3 { font-size: clamp(1.25rem, 1.1rem + .68vw, 1.625rem); line-height: 1.2; }
.h4 {
  font-family: var(--serif);
  font-size: clamp(1.02rem, .97rem + .24vw, 1.15rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0;
}

/* The standfirst under a title. Literata, a shade larger than body text. */
.lede {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + .34vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose {
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .2vw, 1.0938rem);
  line-height: 1.74;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose + .prose { margin-top: 1.15em; }
.prose a {
  border-bottom: 1px solid var(--g-200);
  color: var(--g-700);
}
.prose a:hover { border-bottom-color: var(--g-600); }

.measure { max-width: 62ch; }

/* Tabular figures wherever numbers are meant to line up. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ==============================================================================
   Rules
   ============================================================================ */
.rule       { height: 1px; background: var(--rule); border: 0; }
.rule--firm { height: 3px; background: var(--ink); }
.rule--brass{ height: 1px; background: var(--brass-3); }

/* ==============================================================================
   Buttons and links
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: var(--tap);
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--g-700);
  border-color: var(--g-700);
  color: var(--paper);
}
.btn--solid:hover { background: var(--g-800); border-color: var(--g-800); }

.btn--outline {
  background: transparent;
  border-color: var(--rule-firm);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--g-700); color: var(--g-700); }

.btn--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--g-800);
}
.btn--light:hover { background: var(--foil); border-color: var(--foil); color: var(--g-900); }

.btn--ghost-light {
  background: transparent;
  border-color: var(--rule-dark);
  color: var(--paper);
}
.btn--ghost-light:hover { border-color: var(--foil); color: var(--foil); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The only "go here" affordance outside real buttons. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-700);
  white-space: nowrap;
}
.arrow-link__go {
  display: flex;
  transition: transform .24s var(--ease-out);
}
.arrow-link__go svg { width: 1.15rem; height: 1.15rem; }
.arrow-link:hover { color: var(--g-800); }
.arrow-link:hover .arrow-link__go { transform: translateX(.3rem); }
.arrow-link--light { color: var(--foil); }
.arrow-link--light:hover { color: var(--paper); }

/* ==============================================================================
   Language switcher
   ------------------------------------------------------------------------------
   One control naming the language you are reading, opening onto all three. A
   row of three codes was wider than it needed to be, changed width with its
   own labels, and read as a heading rather than a choice.

   The trigger is fixed-width by construction — a globe, two letters, a caret —
   so it is the one part of the masthead that cannot move when the language
   changes.
   ============================================================================ */
.langs { position: relative; }

.langs__toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.4rem;
  padding-inline: .7rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background-color .18s var(--ease);
}
.langs__toggle:hover { border-color: var(--rule-firm); color: var(--g-700); }
.langs.is-open .langs__toggle {
  border-color: var(--g-600);
  background: var(--paper-raise);
  color: var(--g-800);
}
.langs__toggle > svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--ink-4); }
.langs__toggle:hover > svg, .langs.is-open .langs__toggle > svg { color: currentColor; }
.langs__current {
  /* Two letters, but UZ, RU and EN are not the same two letters and do not set
     to the same width; a fixed box keeps the trigger from breathing. */
  width: 1.75rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.langs__caret { display: flex; color: var(--ink-4); }
.langs__caret svg {
  width: .7rem; height: .7rem;
  transition: transform .26s var(--ease-out);
}
.langs.is-open .langs__caret svg { transform: rotate(180deg); }

.langs__menu {
  position: absolute;
  top: calc(100% + .45rem);
  inset-inline-end: 0;
  z-index: 260;
  min-width: 11.5rem;
  padding: .3rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  /* Closed state: collapsed toward the trigger, and inert to the pointer. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem) scale(.97);
  transform-origin: 100% 0;
  transition: opacity .2s var(--ease), transform .24s var(--ease-out),
              visibility 0s linear .24s;
}
.langs.is-open .langs__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s var(--ease), transform .26s var(--ease-out),
              visibility 0s;
}

.langs__option {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .58rem .55rem;
  background: none;
  border: 0;
  border-radius: 2px;
  text-align: start;
  color: var(--ink-2);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.langs__option:hover { background: var(--paper-deep); color: var(--g-800); }
.langs__abbr {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-4);
}
.langs__name { font-family: var(--serif); font-size: .9375rem; }
.langs__tick { display: flex; color: var(--g-600); opacity: 0; }
.langs__tick svg { width: 1rem; height: 1rem; }
.langs__option[aria-checked="true"] { color: var(--g-800); }
.langs__option[aria-checked="true"] .langs__abbr { color: var(--brass); }
.langs__option[aria-checked="true"] .langs__tick { opacity: 1; }

/* In the drawer the control sits at the foot of a scrolling panel, so the
   menu opens upward into the space it actually has. */
.drawer__foot .langs { justify-self: start; }
.drawer__foot .langs__menu {
  top: auto;
  bottom: calc(100% + .45rem);
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform-origin: 0 100%;
  transform: translateY(.35rem) scale(.97);
}
.drawer__foot .langs.is-open .langs__menu { transform: none; }

/* ==============================================================================
   Text that keeps its size in every language
   ------------------------------------------------------------------------------
   All three translations occupy one grid cell; two of them are hidden. The cell
   is sized by the widest, so a button or a nav item measures the same in Uzbek,
   Russian and English and nothing on the page shifts when the reader switches.
   ============================================================================ */
.swap { display: grid; justify-items: start; max-width: 100%; }
.swap > * { grid-area: 1 / 1; min-width: 0; }

/* Where the cell is wider than the current label, centre it: a nav item or a
   button holding space for a longer translation should look evenly padded,
   not left-aligned with a gap trailing after it. */
.btn .swap, .nav__link .swap { justify-items: center; }
.swap__ghost { visibility: hidden; pointer-events: none; user-select: none; }

/* Controls set on one line stay on one line in all three languages. */
.btn .swap > *,
.nav__link .swap > *,
.arrow-link .swap > * { white-space: nowrap; }

/* ==============================================================================
   Masthead
   ============================================================================ */
.masthead {
  position: relative;
  z-index: 210;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.15rem, 2.4vw, 1.85rem);
  transition: padding-block .28s var(--ease);
}

.brand { display: flex; align-items: center; gap: clamp(.85rem, 1.8vw, 1.35rem); min-width: 0; }
.brand__mark {
  width: clamp(2.75rem, 5vw, 4.05rem);
  height: auto;
  flex: none;
  transition: width .28s var(--ease);
}
.brand__rule {
  width: 1px;
  align-self: stretch;
  margin-block: .15rem;
  background: var(--brass-3);
  flex: none;
}
.brand__text { min-width: 0; }
.brand__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(.86rem, .60rem + 1.08vw, 1.62rem);
  font-weight: 550;
  line-height: 1.16;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand__org {
  display: block;
  margin-top: .45rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.brand:hover .brand__name { color: var(--g-700); }

/* The tools never give ground: if the row runs short it is the wordmark that
   wraps, not the language control or the menu button. Without this the
   switcher is compressed by a few pixels on the narrower screens, and by a
   different few in each language. */
.masthead__tools { display: flex; align-items: center; gap: .85rem; margin-left: auto; flex: none; }
.masthead__tools > * { flex: none; }

.burger {
  display: none;
  place-items: center;
  width: var(--tap); height: var(--tap);
  background: none;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  color: var(--ink);
}
.burger svg { width: 1.25rem; height: 1.25rem; }

/* ==============================================================================
   Search
   ------------------------------------------------------------------------------
   The bar carries a field-shaped button, not a field: one search overlay serves
   the whole site, so there is a single place where results live and a single
   set of keys that reach it. The button keeps the shape of a field because that
   is what it promises.
   ============================================================================ */
.search-trigger {
  display: flex;
  align-items: center;
  gap: .55rem;
  /* Sized so the bar has slack at every width: with seven stabilised nav items
     beside it, a wider trigger put the row a few pixels over capacity, and the
     trigger — the only item that can shrink — absorbed the difference. That
     made it the one part of the bar whose size depended on the language. */
  width: clamp(8.5rem, 18vw, 15.5rem);
  min-width: 0;
  height: 2.65rem;
  padding-inline: .85rem;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-4);
  text-align: start;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease);
}
.search-trigger:hover {
  border-color: var(--rule-firm);
  background: var(--paper-raise);
  color: var(--ink-3);
}
.search-trigger svg { width: 1rem; height: 1rem; flex: none; }
.search-trigger__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .875rem;
}
.search-trigger__key {
  flex: none;
  padding: .1rem .38rem;
  border: 1px solid var(--rule-firm);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-4);
}
.search-trigger--drawer { width: 100%; }
/* No keyboard on a phone, so no key to advertise. */
.search-trigger--drawer .search-trigger__key { display: none; }

/* ---- the overlay --------------------------------------------------------- */
.qs {
  position: fixed;
  inset: 0;
  z-index: 380;
  visibility: hidden;
  pointer-events: none;
}
.qs.is-open { visibility: visible; pointer-events: auto; }

.qs__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 35, 26, .46);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.qs.is-open .qs__scrim { opacity: 1; }

.qs__panel {
  position: absolute;
  inset-inline: 0;
  top: clamp(3rem, 9vh, 7rem);
  width: min(42rem, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  max-height: min(32rem, 76vh);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(6, 35, 26, .10), 0 40px 80px -40px rgba(6, 35, 26, .75);
  overflow: hidden;
  /* Closed: a little above where it lands, slightly small. Opening reverses
     both, which reads as the panel coming forward rather than dropping in. */
  opacity: 0;
  transform: translateY(-.75rem) scale(.985);
  transition: opacity .26s var(--ease), transform .34s var(--ease-out);
}
.qs.is-open .qs__panel { opacity: 1; transform: none; }

.qs__field {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem .9rem .35rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  flex: none;
}
.qs__field > svg { width: 1.15rem; height: 1.15rem; color: var(--ink-4); flex: none; }
.qs__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.6rem;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
}
.qs__input::placeholder { color: var(--ink-4); font-family: var(--sans); font-size: .95rem; }
.qs__input:focus { outline: none; }
.qs__input::-webkit-search-cancel-button { display: none; }
.qs__close {
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-4);
}
.qs__close:hover { border-color: var(--rule-firm); color: var(--ink); }
.qs__close svg { width: 1rem; height: 1rem; }

.qs__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem;
  scroll-behavior: auto;
}
.qs__group {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem .75rem .45rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.qs__group .num { color: var(--brass); }

.qs__row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .7rem .75rem;
  border-radius: 3px;
  color: inherit;
}
/* One highlight, driven by aria-selected, so the pointer and the arrow keys
   cannot disagree about which row is current. */
.qs__row[aria-selected="true"] { background: var(--g-050); }
.qs__icon { display: flex; color: var(--ink-4); }
.qs__row[aria-selected="true"] .qs__icon { color: var(--g-700); }
.qs__icon svg { width: 1.1rem; height: 1.1rem; }
.qs__body { min-width: 0; }
.qs__title {
  display: block;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink);
}
.qs__note {
  display: block;
  margin-top: .18rem;
  font-size: .8125rem;
  color: var(--ink-3);
}
.qs__row mark {
  background: rgba(227, 200, 136, .48);
  color: inherit;
  border-radius: 2px;
  padding: 0 .06em;
}
.qs__meta { display: flex; align-items: center; gap: .5rem; flex: none; }
.qs__page { font-size: .75rem; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.qs__tag {
  padding: .1rem .4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--ink-4);
}

.qs__empty {
  padding: 2.5rem .75rem;
  text-align: center;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--ink-3);
}
.qs__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
  padding: .85rem .75rem;
  border-top: 1px solid var(--rule);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-700);
}
.qs__all svg { width: 1.1rem; height: 1.1rem; }

.qs__foot {
  flex: none;
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
}
.qs__keys { font-size: .6875rem; letter-spacing: .04em; color: var(--ink-4); }

@media (max-width: 640px) {
  .qs__panel { top: 0; max-height: 100%; height: 100%; width: 100%; border: 0; border-radius: 0; }
  .qs__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qs__scrim, .qs__panel { transition: none; }
}

/* ==============================================================================
   Primary navigation
   ============================================================================ */
/* A sticky element stays pinned only for as long as its containing block is
   on screen, and #site-header ends the moment the nav does — so the bar would
   scroll away with it. Taking the wrapper out of the box tree hands the nav
   straight to the body, which is what it needs to stick against. */
#site-header { display: contents; }

/* The sentinel marks where the nav bar sits in the flow; the script watches it
   to know the moment the bar becomes pinned. One pixel, pulled back out of the
   layout so it changes nothing. */
.nav-sentinel { height: 1px; margin-bottom: -1px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* Pinned: the bar has to hold its own edge against whatever scrolls under it,
   so the hairline firms up and picks up a shallow shadow. It also loses a
   little height, which reads as the page settling rather than as a jump. */
html.is-stuck .nav {
  border-bottom-color: var(--rule-firm);
  box-shadow: 0 12px 24px -22px rgba(6, 35, 26, .85);
}
html.is-stuck .nav__link { min-height: 3rem; }

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__list { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
/* Items hold their size; if the row runs short it is the search field that
   gives way, never a label. */
.nav__list > li { flex: none; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              min-height .25s var(--ease);
  padding-inline: clamp(.45rem, .95vw, .85rem);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav__list > li:first-child .nav__link { padding-inline-start: 0; }
.nav__link:hover { color: var(--g-700); }
.nav__link[aria-current="page"] { color: var(--g-800); border-bottom-color: var(--g-700); }
.nav__aside { display: flex; align-items: center; gap: .85rem; flex: 0 1 auto; min-width: 0; }

/* ==============================================================================
   Mobile drawer
   ============================================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6,35,26,.55);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(24rem, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .34s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { transform: none; }
/* Width alone is not enough: the mark carries width and height attributes, so
   without `height: auto` the attribute wins and the head grows to 232px of
   mostly empty space. */
.drawer__mark { width: 2.2rem; height: auto; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  border-bottom: 3px solid var(--ink);
}
.drawer__close {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  background: none;
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  color: var(--ink);
}
.drawer__close svg { width: 1.1rem; height: 1.1rem; }
.drawer__body { padding: 1.35rem var(--gutter) 2.5rem; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 550;
  color: var(--ink);
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--g-700); }
.drawer__link span {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-4);
}
.drawer__foot { margin-top: 1.75rem; display: grid; gap: 1.1rem; justify-items: stretch; }

/* ==============================================================================
   Sections
   ------------------------------------------------------------------------------
   Every section opens with a .sec-head — eyebrow, title, optional action —
   closed off by a 3px rule the full width of the container. Below it, most
   sections use .sec-split: a label column on the left, content on the right.
   ============================================================================ */
.section { padding-block: var(--band); }
.section--tint { background: var(--paper-tint); }
.section--tight { padding-block: calc(var(--band) * .62); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.15rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: clamp(2rem, 3.6vw, 3.25rem);
}
.sec-head__main { min-width: 0; }
.sec-head__title {
  margin-top: .6rem;
  /* 24ch left the heading huddled in the left third of a very wide rule. The
     measure is still bounded — a heading this size is unreadable at full
     container width — but it now uses the band it sits on. */
  max-width: 38ch;
}
.sec-head__action { padding-bottom: .35rem; }

.sec-split {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: start;
}
.sec-split__aside { position: sticky; top: 5.5rem; }
/* The rail is 13.5rem wide and these labels are set for the longest of three
   languages, so they need their padding trimmed to sit comfortably in it. */
.sec-split__aside .btn { width: 100%; padding-inline: .9rem; }
.sec-split__aside .label + * { margin-top: .9rem; }
.sec-split__note { margin-top: .9rem; font-size: .875rem; color: var(--ink-3); }

/* A two-column content grid that folds to one. */
.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }

/* Keyword / subject chips. */
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: .34rem .72rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
}
.section--tint .tag { background: var(--paper); }

/* A plain bordered block — used for meta cards and note panels. */
.card {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.card__title { margin-bottom: .55rem; }
.card__text { font-family: var(--serif); font-size: .9375rem; line-height: 1.68; color: var(--ink-2); }

/* Numbered cards, for ordered procedures. */
.card--step { position: relative; padding-top: 2.9rem; }
.card--step::before {
  content: attr(data-step);
  position: absolute;
  top: 1.15rem;
  left: clamp(1.25rem, 2.2vw, 1.75rem);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brass-2);
  font-variant-numeric: tabular-nums;
}

/* A definition list of publication facts. */
.facts { border-top: 1px solid var(--rule); }
.facts__row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: .35rem 1.25rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule);
}
.facts__key {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: .2rem;
}
.facts__val { font-family: var(--serif); font-size: .9375rem; line-height: 1.6; color: var(--ink); }

/* ==============================================================================
   The issue, as a book
   ------------------------------------------------------------------------------
   A real volume, photographed the way a publisher photographs one: square to
   the camera and turned only a few degrees, so the spine shows as a narrow
   edge down the left and the cover stays readable. Books are thin objects —
   the board is about three per cent of the width — and the earlier cut turned
   it far enough that it read as a slab rather than as a book.

   Geometry, so it stays coherent if it is ever adjusted:
     · the body turns +4deg about Y, which brings the LEFT edge forward;
     · the cover sits one board-depth toward the viewer;
     · the spine bridges the gap at the left edge and is the one side face
       the turn exposes;
     · the fore-edge is on the right, away from us, and stays hidden.

   Type inside is sized in container query units, so one rule set serves the
   hero book and the archive thumbnails alike; every such declaration is
   preceded by a plain fallback.
   ============================================================================ */
.book {
  container-type: inline-size;
  --board: 3.2cqw;          /* how thick the book is */
  --turn: 4deg;             /* how far it is turned toward us */
  width: 100%;
  margin: 0;
}

.book__scene {
  position: relative;
  width: 100%;
  perspective: 3000px;      /* long lens: little distortion, as in a studio */
  perspective-origin: 42% 44%;
}

.book__body {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.45;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn));
  transition: transform .8s var(--ease-out);
}
.book:hover .book__body { --turn: 7deg; }

/* The spine: the left side of the board, bridging from the back of the book
   to the cover. This is the only side face the turn shows. */
.book__spine {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3.2%;
  width: var(--board);
  transform-origin: left center;
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, #041710 0%, #07281d 42%, #0a3427 100%);
}

/* The fore-edge, where the pages show. Turned away at this angle, but present
   so the object is honest if the turn is ever increased. */
.book__leaves {
  position: absolute;
  top: .6%;
  bottom: .6%;
  right: 0;
  width: 3.2%;
  width: var(--board);
  transform-origin: right center;
  transform: rotateY(90deg);
  background:
    repeating-linear-gradient(to bottom,
      rgba(116, 104, 80, .38) 0 .4px, rgba(0, 0, 0, 0) .4px 2px),
    linear-gradient(90deg, #b6aa8e 0%, #ece4d0 30%, #f6f0e0 62%, #cfc4a8 100%);
}

/* The printed cover, carried on the front board. */
.book__cover {
  position: absolute;
  inset: 0;
  transform: translateZ(3.2cqw);
  transform: translateZ(var(--board));
  overflow: hidden;
  border-radius: 1px 3px 3px 1px;
  background: linear-gradient(163deg, #14563d 0%, #0d4130 45%, #072a1f 100%);
  isolation: isolate;
}
.book--mid  .book__cover { background: linear-gradient(163deg, #17593f 0%, #0e422e 48%, #071f16 100%); }
.book--deep .book__cover { background: linear-gradient(163deg, #0f4331 0%, #082c20 48%, #04170f 100%); }

/* Where the cover bends over the spine the cloth always darkens; a hairline of
   light sits just inside it, which is what makes the fold read as a fold. */
.book__hinge {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 7%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .20) 40%,
    rgba(255, 255, 255, .05) 82%, rgba(255, 255, 255, 0) 100%);
}

/* Cloth tooth, very faint. */
.book__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .045) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 74%, rgba(0, 0, 0, .07) 0 1px, transparent 1px);
  background-size: 5px 5px, 7px 7px;
}

/* One soft highlight raking down from the upper left, and the board's own
   edges catching a little of it. */
.book__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(152deg,
    rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .022) 30%,
    rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, .11) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(255, 255, 255, .045),
    inset 0 -1px 0 rgba(0, 0, 0, .22);
}

/* Two shadows: a tight one where the book meets the surface, and a wide soft
   one for the room. Both fall down and to the right, away from the light. */
.book__shadow {
  position: absolute;
  z-index: -1;
  left: 5%;
  right: 0%;
  bottom: -1.6%;
  height: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 35, 26, .62), rgba(6, 35, 26, 0) 100%);
  filter: blur(5px);
}
.book__scene::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: -1%;
  right: -8%;
  bottom: -7%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 35, 26, .22), rgba(6, 35, 26, 0) 100%);
  filter: blur(24px);
}

/* ---- what is printed on the cover ---------------------------------------- */
.book__print {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.9rem 1.7rem 1.6rem;
  padding: 10cqw 8.5cqw 8cqw 10cqw;
  color: var(--paper);
}

/* The frame a bound journal is usually blocked with. */
.book__print::before {
  content: "";
  position: absolute;
  inset: 5.5cqw 4.5cqw 5cqw 6cqw;
  border: 1px solid rgba(227, 200, 136, .28);
  pointer-events: none;
}

.book__org {
  font-size: .66rem;
  font-size: 3cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--foil);
  margin-inline-start: .3em;
}
.book__mid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  gap: 4cqw;
  width: 100%;
}
.book__emblem { width: 20%; width: 15.5cqw; height: auto; }
.book__rule { width: 26%; width: 20cqw; height: 1px; background: var(--brass-3); opacity: .75; }
.book__title {
  font-family: var(--display);
  font-size: 1.7rem;
  font-size: 8cqw;
  font-weight: 550;
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--paper);
  text-wrap: balance;
}
.book__sub {
  font-size: .62rem;
  font-size: 2.9cqw;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--foil);
  margin-inline-start: .24em;
}
.book__foot {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .42rem;
  gap: 2cqw;
  padding-top: .74rem;
  padding-top: 3.2cqw;
  border-top: 1px solid rgba(227, 200, 136, .38);
  font-size: .72rem;
  font-size: 3.2cqw;
  font-variant-numeric: tabular-nums;
}
.book__issue { color: var(--g-200); letter-spacing: .05em; }
.book__year { color: var(--foil); font-family: var(--display); font-size: .97rem; font-size: 4.4cqw; }

/* The compact cut used in the archive grid and the issue rail. */
.book--mini { --board: 4cqw; }
.book--mini .book__print { padding: 1.3rem 1rem 1rem; padding: 11cqw 8cqw 8.5cqw 10cqw; justify-content: space-between; }
.book--mini .book__print::before { inset: 6cqw 5cqw 5.5cqw 6.5cqw; }
.book--mini .book__emblem { width: 30%; width: 25cqw; margin-block: auto; }
.book--mini .book__foot { font-size: .68rem; font-size: 4.8cqw; padding-top: .55rem; padding-top: 3.6cqw; }
.book--mini .book__year { font-size: .87rem; font-size: 6cqw; }

.plate-caption { margin-top: 1.35rem; text-align: center; }
.plate-caption__issue {
  margin-top: .4rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 550;
  color: var(--ink);
}

/* ==============================================================================
   Hero
   ============================================================================ */
/* Two columns since the colophon strip came out: the title block, and the
   issue itself. The strip repeated in four labelled rows what the cover of the
   book beside it already said. */
.hero { padding-block: clamp(2.75rem, 5.5vw, 5rem) clamp(3rem, 6vw, 5.75rem); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 21rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero__body { min-width: 0; }
.hero__title { margin-top: .85rem; }
.hero__lede { margin-top: clamp(1.25rem, 2.2vw, 1.85rem); max-width: 46ch; }
.hero__actions { margin-top: clamp(1.6rem, 2.6vw, 2.25rem); }

/* ==============================================================================
   Dark registers
   ------------------------------------------------------------------------------
   Full-bleed deep green. Two per page at most, so the page reads as alternating
   light and dark bands rather than one continuous scroll.
   ============================================================================ */
.band {
  background: var(--g-900);
  color: var(--paper);
  padding-block: clamp(2.25rem, 3.8vw, 3.4rem);
}
.band h2, .band h3 { color: var(--paper); }
.band p { color: var(--g-200); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.stat { border-top: 1px solid var(--rule-dark); padding-top: 1.1rem; }
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.35rem, 1.7rem + 2.4vw, 3.4rem);
  font-weight: 550;
  line-height: 1;
  color: var(--foil);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: .7rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--g-200);
}

.cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta__text { max-width: 46ch; margin-top: .9rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ==============================================================================
   Table of contents
   ------------------------------------------------------------------------------
   The page number sits in the left gutter, the way a printed contents page
   sets it; the title is the link.
   ============================================================================ */
.toc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule-firm);
}
.toc-head__count { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }

.toc { border-top: 0; }

/* Each entry carries two references, as a printed contents page does: the page
   number in the gutter points at the issue, the title points at the article.
   The number is now live — it opens the PDF at that page rather than at the
   cover — so it is set as a target of its own with the reader's mark showing
   on hover. */
.toc__item {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1.35rem;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}
.toc__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1.35rem;
  align-items: baseline;
  padding-block: 1.15rem;
  color: inherit;
}
.toc__page {
  position: relative;
  display: block;
  padding-block: 1.15rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brass-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.toc__page-num { display: block; transition: opacity .18s var(--ease); }
.toc__page-hint {
  position: absolute;
  top: 1.15rem;
  inset-inline-start: 0;
  display: flex;
  color: var(--g-700);
  opacity: 0;
  transform: translateY(.2rem);
  transition: opacity .18s var(--ease), transform .22s var(--ease-out);
}
.toc__page-hint svg { width: 1.15rem; height: 1.15rem; }
.toc__page:hover .toc__page-num, .toc__page:focus-visible .toc__page-num { opacity: 0; }
.toc__page:hover .toc__page-hint, .toc__page:focus-visible .toc__page-hint {
  opacity: 1;
  transform: none;
}
.toc__title {
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.toc__link:hover .toc__title { color: var(--g-700); }
.toc__author { display: block; margin-top: .42rem; font-size: .8125rem; color: var(--ink-3); }
.toc__go { color: var(--ink-4); align-self: center; transition: color .18s var(--ease); }
.toc__go svg { width: 1.1rem; height: 1.1rem; }
.toc__link:hover .toc__go { color: var(--g-700); }
.toc__empty { padding-block: 2.5rem; color: var(--ink-3); font-family: var(--serif); }

.search-note {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  padding: .8rem 1rem;
  background: var(--g-050);
  border: 1px solid var(--g-100);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--ink-2);
}
.search-note.is-on { display: flex; }
.search-note button {
  background: none;
  border: 0;
  padding: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==============================================================================
   Archive
   ============================================================================ */
.archive-group { margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.archive-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule-firm);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.archive-group__year { font-family: var(--display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.issue-card { display: flex; flex-direction: column; gap: 1.1rem; }
.issue-card__plate { width: 100%; max-width: 13.5rem; }
.issue-card__status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}
.issue-card__status::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.issue-card__status--current { color: var(--g-600); }
.issue-card__title { margin-top: .5rem; }
.issue-card__text { margin-top: .55rem; font-family: var(--serif); font-size: .9rem; line-height: 1.65; color: var(--ink-3); }
.issue-card__actions { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==============================================================================
   Editorial board
   ============================================================================ */
.leads { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.lead {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: .5rem 2.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.lead__role { font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); padding-top: .3rem; }
.lead__name { font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.lead__note { margin-top: .45rem; font-family: var(--serif); font-size: .9375rem; line-height: 1.65; color: var(--ink-3); }

.members { columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.members li {
  break-inside: avoid;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: .9375rem;
  color: var(--ink);
}

/* ==============================================================================
   Page header (inner pages)
   ============================================================================ */
/* The header used to be one 62ch column, which is the right measure for
   reading and the wrong shape for a page: it left the right-hand half of the
   band empty and the page read as unfinished. Set as a deck instead — headline
   in the wide column, standfirst in the narrow one, divided by a hairline —
   the measure stays readable and the band is filled, which is how a broadsheet
   has always solved the same problem. */
.page-head { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 2.4vw, 2rem); }
.page-head__inner { max-width: none; }

.page-head__deck {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.75rem);
  align-items: start;
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
.page-head__lead { min-width: 0; }

/* Titles here are full sentences, not one-word section names, so they are set
   a step below the display size the home page uses. */
.page-head__title {
  margin-top: .7rem;
  font-size: clamp(1.95rem, 1.4rem + 2.1vw, 3rem);
}
/* The page's own action belongs under its title, not stranded in the section
   below it — and it fills the column the standfirst would otherwise tower over. */
.page-head__actions { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }

.page-head__lede {
  margin-top: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.02rem, .98rem + .28vw, 1.19rem);
}

/* The page header already opens the page; the section under it need not
   open it a second time. */
.page-head + .section { padding-top: clamp(.75rem, 1.6vw, 1.5rem); }

/* ==============================================================================
   Article page
   ------------------------------------------------------------------------------
   One article, set as an offprint: title, authorship, a metadata rail, the
   abstract when the editors have supplied one, and a citation the reader can
   copy. Everything here comes from data.js — nothing is inferred.
   ============================================================================ */
.article__head { border-bottom: 3px solid var(--ink); padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }

/* Title and byline share the band, the same way the inner page headers do. */
.article__head-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 3.5vw, 3.75rem);
  align-items: start;
  margin-top: .9rem;
}
.article__title {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.14;
}
.article__byline { padding-top: .4rem; border-top: 1px solid var(--rule); }
.article__authors {
  margin-top: .85rem;
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink);
}
.article__affil { margin-top: .4rem; font-size: .875rem; color: var(--ink-3); }

.article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
}

.article__section + .article__section { margin-top: clamp(2rem, 3.4vw, 3rem); }
.article__section-title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}
.article__abstract { font-family: var(--serif); font-size: 1.02rem; line-height: 1.78; color: var(--ink-2); }

/* When no abstract has been supplied, say so plainly rather than inventing one. */
.article__pending {
  padding: 1.1rem 1.25rem;
  background: var(--paper-deep);
  border-inline-start: 2px solid var(--brass-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--serif);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.cite {
  position: relative;
  padding: 1.15rem 1.25rem;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--ink);
}
.cite__copy {
  margin-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-700);
}
.cite__copy svg { width: .95rem; height: .95rem; }

.rail { position: sticky; top: 5.5rem; display: grid; gap: 1.5rem; }
.rail__box { padding: 1.35rem; background: var(--paper-raise); border: 1px solid var(--rule); border-radius: var(--radius); }
.rail__title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: .3rem;
}
.rail__row { display: grid; gap: .15rem; padding-block: .7rem; border-bottom: 1px solid var(--rule); }
.rail__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rail__key { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.rail__val { font-family: var(--serif); font-size: .9375rem; color: var(--ink); }

/* Previous / next within the issue. */
.artnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-block: 1px solid var(--rule);
}
.artnav__link { display: grid; gap: .5rem; padding: 1.35rem 0; }
.artnav__link--next { border-inline-start: 1px solid var(--rule); }
.artnav__link--next { text-align: right; padding-inline-start: 1.5rem; }
.artnav__link--prev { padding-inline-end: 1.5rem; }
.artnav__dir { font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.artnav__title { font-family: var(--serif); font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.artnav__link:hover .artnav__title { color: var(--g-700); }

/* ==============================================================================
   For authors — the submission procedure
   ============================================================================ */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 3px solid var(--ink); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .5rem 1.75rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.step__num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 550;
  line-height: 1;
  color: var(--brass-2);
  font-variant-numeric: tabular-nums;
}
.step__title { font-family: var(--display); font-size: 1.28rem; font-weight: 600; }
.step__text { margin-top: .5rem; font-family: var(--serif); font-size: .9375rem; line-height: 1.68; color: var(--ink-2); }

/* ==============================================================================
   Contact
   ============================================================================ */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); border-top: 3px solid var(--ink); }
.contact-row { padding-block: 1.35rem; border-bottom: 1px solid var(--rule); }
.contact-row--wide { grid-column: 1 / -1; }
.contact-row__val { margin-top: .45rem; font-family: var(--serif); font-size: 1.02rem; color: var(--ink); }
.contact-row__val a { color: var(--g-700); border-bottom: 1px solid var(--g-200); }
.contact-row__val a:hover { border-bottom-color: var(--g-600); }

/* ==============================================================================
   Map of the issue
   ------------------------------------------------------------------------------
   A dial, not a cloud: the issue at the centre, languages on the inner ring,
   articles on the outer one. Everything is drawn in one 1000-unit square and
   scaled by the container, so the geometry in site.js needs no breakpoints.
   ============================================================================ */
.map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.map__legend { display: grid; gap: .8rem; margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.map__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.map__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: .8125rem;
  color: var(--ink-2);
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease);
}
.map__chip:hover { border-color: var(--rule-firm); color: var(--ink); }
.map__chip.is-on { border-color: var(--g-600); background: var(--g-050); color: var(--g-800); }
.map__chip-tag {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--brass);
}
.map__chip .num { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.map__chip--reset { color: var(--ink-3); }

.map__figure { width: 100%; }
.map__svg { width: 100%; height: auto; overflow: visible; }

/* Rings and edges are furniture: they place the nodes and then get out of the
   way, so they are drawn at the weight of a rule rather than of a line. */
.map__ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.map__ring--inner { stroke-dasharray: 2 5; }

.map__edge {
  fill: none;
  stroke: var(--rule-firm);
  stroke-width: 1.1;
  transition: stroke .2s var(--ease), stroke-width .2s var(--ease), opacity .2s var(--ease);
}
.map__edge.is-on { stroke: var(--g-600); stroke-width: 2; }

.map__hub circle { fill: var(--g-900); }
.map__hub-num {
  fill: var(--foil);
  font-family: var(--display);
  font-size: 40px;
  font-weight: 550;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.map__hub-label {
  fill: var(--g-200);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-anchor: middle;
  text-transform: uppercase;
}

.map__lang circle { fill: var(--paper); stroke: var(--brass-3); stroke-width: 1.4; }
.map__lang text {
  fill: var(--brass);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-anchor: middle;
}

.map__node { cursor: pointer; outline: none; }
.map__dot {
  fill: var(--g-100);
  stroke: var(--g-600);
  stroke-width: 1.4;
  transition: fill .2s var(--ease), stroke-width .2s var(--ease), r .2s var(--ease);
}
.map__label {
  fill: var(--ink-3);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  transition: fill .2s var(--ease);
}
.map__node:hover .map__dot,
.map__node:focus-visible .map__dot,
.map__node.is-on .map__dot { fill: var(--g-600); stroke-width: 2.4; }
.map__node:hover .map__label,
.map__node:focus-visible .map__label,
.map__node.is-on .map__label { fill: var(--g-800); }
.map__node:focus-visible .map__dot { stroke: var(--brass-2); stroke-width: 3; }

/* Filtering by language dims rather than hides, so the shape of the issue
   stays legible while one language is being read. */
.map__svg .is-dim { opacity: .16; }
.map__svg .is-dim.map__node { pointer-events: none; }

.map__hint {
  margin-top: 1.1rem;
  font-size: .8125rem;
  color: var(--ink-4);
  text-align: center;
}

.map__panel { position: sticky; top: 5.5rem; }
.map__card {
  padding: 1.35rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.map__card--idle { border-style: dashed; }
.map__card-title {
  margin-top: .7rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.map__card-note { margin-top: .5rem; font-size: .875rem; color: var(--ink-3); }
.map__card-facts { margin-top: 1rem; border-top: 1px solid var(--rule); }
.map__card-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .65rem;
}
.map__card-facts dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.map__card-facts dd { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.map__card-actions { margin-top: 1rem; display: grid; gap: .55rem; }
.map__card-actions .btn { width: 100%; }

/* The same articles as a plain list: the route for anyone not using a pointer,
   and the faster route for anyone who already knows what they are looking for. */
.map-groups { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.map-group__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule-firm);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.map-group__tag { color: var(--brass); }
.map-group__head .num { margin-left: auto; color: var(--ink-4); }

@media (max-width: 940px) {
  .map { grid-template-columns: minmax(0, 1fr); }
  .map__panel { position: static; }
  .map__svg { max-width: 34rem; margin-inline: auto; }
}

@media (max-width: 520px) {
  /* Twelve radial labels cannot be set legibly at this width; the dial keeps
     its shape and the list below carries the names. */
  .map__label { display: none; }
  .map__hint { display: none; }
}

/* ==============================================================================
   Footer
   ============================================================================ */
.footer { background: var(--g-950); color: var(--g-200); padding-block: clamp(3rem, 5.5vw, 4.75rem) 0; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--rule-dark);
}
.footer__brand-mark { width: 3.1rem; height: auto; }
.footer__brand-name {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
}
.footer__brand-note { margin-top: .85rem; font-family: var(--serif); font-size: .9rem; line-height: 1.65; color: var(--g-200); max-width: 34ch; }
.footer__col-title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--foil);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: .35rem;
}
.footer__list li { padding-block: .48rem; }
.footer__list a { color: var(--g-200); font-size: .9rem; }
.footer__list a:hover { color: var(--paper); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-block: 1.5rem 2rem;
  font-size: .8125rem;
  color: var(--g-300);
}
.footer__top-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--g-200); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer__top-link:hover { color: var(--foil); }
.footer__top-link svg { width: .95rem; height: .95rem; }

/* ==============================================================================
   Full-screen PDF reader
   ============================================================================ */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: none;
  flex-direction: column;
  background: var(--g-950);
}
.viewer.is-open { display: flex; }
.viewer__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem clamp(.9rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule-dark);
  background: var(--g-900);
}
.viewer__mark { width: 1.9rem; height: auto; flex: none; }
.viewer__meta { min-width: 0; }
.viewer__eyebrow { font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--foil); }
.viewer__name { font-family: var(--display); font-size: 1rem; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.viewer__btn {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--paper);
}
.viewer__btn:hover { border-color: var(--foil); color: var(--foil); }
.viewer__btn svg { width: 1.15rem; height: 1.15rem; }
.viewer__stage { flex: 1 1 auto; min-height: 0; position: relative; background: #1a1a18; }
.viewer__frame { width: 100%; height: 100%; border: 0; }
.viewer__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .75rem;
  justify-items: center;
  color: var(--g-300);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ==============================================================================
   Reveal on scroll
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }

/* ==============================================================================
   Responsive — each breakpoint only fixes what the fluid rules cannot
   ============================================================================ */
@media (max-width: 1180px) {
  :root { --rail: 13rem; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem); }
}

@media (max-width: 1040px) {
  .article__body { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* Below this the deck has no room for two columns: the headline column gets
   narrow enough that the standfirst beside it turns into a ribbon. */
@media (max-width: 900px) {
  .page-head__deck, .article__head-deck { grid-template-columns: minmax(0, 1fr); }
  .page-head__lede, .article__byline { max-width: 58ch; }
  .article__byline { padding-top: 1rem; }
}

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: grid; }
  .drawer__panel { display: flex; }

  /* With no nav bar to pin, the masthead itself is what has to stay reachable,
     so it pins and condenses instead — the mark shrinks, the university line
     steps out, and the block loses most of its padding. */
  .masthead { position: sticky; top: 0; }
  html.is-scrolled .masthead { box-shadow: 0 12px 24px -22px rgba(6, 35, 26, .85); }
  html.is-scrolled .masthead__inner { padding-block: .65rem; }
  html.is-scrolled .brand__mark { width: 2.35rem; }
  html.is-scrolled .brand__org { display: none; }
  /* One compact control fits beside the menu button at any width, so unlike
     the row of three codes it replaced, it no longer has to move into the
     drawer to make room. */
  .langs__toggle { padding-inline: .55rem; }
}

@media (max-width: 860px) {
  .sec-split { grid-template-columns: minmax(0, 1fr); }
  .sec-split__aside { position: static; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .hero__aside { max-width: 15rem; }
  .lead { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .members { columns: 1; }
  .facts__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Side by side, whether the action wraps below the heading depends on how
     long the heading is in the current language — so below this width it is
     always stacked, and the section head is the same shape in all three. */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .sec-head__action { padding-bottom: 0; }
  .toc__item { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 .9rem; }
  .toc__link { grid-template-columns: minmax(0, 1fr); }
  .toc__go { display: none; }
  .step { grid-template-columns: 3rem minmax(0, 1fr); gap: .4rem 1rem; }
  .artnav__link--next { text-align: left; padding-inline-start: 0; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .brand__org { display: none; }
}

/* Narrower than this the masthead cannot hold the wordmark, the language
   control and the menu button at once — the button was being clipped off the
   right edge. The switcher steps back into the drawer, where it has always
   also been; the menu button is the one control that must never be lost. */
@media (max-width: 430px) {
  .masthead__tools > .langs { display: none; }
  .masthead__tools { gap: .5rem; }
}

@media (max-width: 460px) {
  .btn { padding-inline: 1.1rem; font-size: .75rem; }
  .plate-caption__issue { font-size: 1.05rem; }
  .hero__aside { max-width: none; }
}

/* ==============================================================================
   Motion and print
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  main { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .drawer, .viewer, .masthead__tools, .footer__top, .arrow-link, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .footer { background: #fff !important; color: #000 !important; }
  .band p, .stat__label, .footer__bottom { color: #333 !important; }
  .stat__num { color: #000 !important; }
  .section, .hero { padding-block: 1.25rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .book__body { transform: none; }
  .book__shadow, .book__scene::after, .book__leaves, .book__spine { display: none; }
}

/* ==============================================================================
   Late additions
   ============================================================================ */

/* Content first, metadata rail second — the mirror of .sec-split, used where
   the reading column is the point of the page. */
.split-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.split-main > * { min-width: 0; }

/* The masthead's submit button belongs to the drawer on small screens. */
@media (max-width: 940px) {
  .masthead__submit { display: none; }
}
@media (max-width: 1040px) {
  .split-main { grid-template-columns: minmax(0, 1fr); }
}


/* Which language an article is written in — the contents list mixes three. */
.toc__lang {
  display: inline-block;
  margin-inline-start: .6rem;
  padding: .1rem .4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--ink-4);
  vertical-align: .06em;
}

/* ==============================================================================
   Page transitions
   ------------------------------------------------------------------------------
   Following a link used to mean a white flash and the whole page snapping into
   place. Three things fix that, and none of them need the browser to support
   view transitions:

     1. the document carries the paper colour, so there is no white frame
        between one page being torn down and the next being painted;
     2. the shell is identical on every page and is not animated, so the
        masthead and the footer look continuous while the content changes;
     3. the content fades down and out on the way from a page, and rises in on
        the way to one, with a hairline bar across the top carrying the wait.

   All of it is inside prefers-reduced-motion, and it degrades to a plain
   navigation if the script never runs.
   ============================================================================ */
html { background: var(--paper); }

@keyframes gf-page-in { from { opacity: 0; transform: translateY(9px); } }

@media (prefers-reduced-motion: no-preference) {
  main { animation: gf-page-in .44s var(--ease-out) both; }

  /* Held by the script from the click until the browser leaves the page. */
  html.is-leaving main {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .17s ease-in, transform .17s ease-in;
    animation: none;
  }
}

/* The hairline that carries the wait. It starts under the masthead rule so it
   reads as part of the page furniture rather than as browser chrome. */
.pagebar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.pagebar.is-on { opacity: 1; }
.pagebar__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--g-600) 0%, var(--brass-3) 78%, var(--foil) 100%);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .pagebar { display: none; } }