/* Longhand Research
   One stylesheet for the whole site. Colours, type and spacing come from the
   tokens below; the dark theme only redefines the tokens. */

:root {
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bg: #f3efe7;          /* paper */
  --bg-sunk: #e7e1d5;     /* the desk under PDF pages */
  --ink: #1c1a16;
  --ink-2: #555047;       /* secondary text, 7:1 on paper */
  --ink-3: #6b655a;       /* tertiary text, 5:1 on paper */
  --rule: rgb(28 26 22 / 0.14);
  --rule-2: rgb(28 26 22 / 0.28);
  --gold: #a87a33;        /* marks and strokes only, 3.3:1 */
  --gold-ink: #7a5314;    /* gold text, 6:1 */
  --tint: rgb(168 122 51 / 0.08);
  --tint-2: rgb(168 122 51 / 0.16);
  --error: #9b3b25;
  --sheet: #fffdf9;
  --sheet-shadow: 0 1px 2px rgb(28 26 22 / 0.14), 0 10px 30px -8px rgb(28 26 22 / 0.18);
  --backdrop: rgb(24 21 16 / 0.52);

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --masthead-h: calc(64px + env(safe-area-inset-top, 0px));
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #15130f;
  --bg-sunk: #0d0c0a;
  --ink: #ece6d8;
  --ink-2: #b4ac9c;
  --ink-3: #958d7e;
  --rule: rgb(236 230 216 / 0.13);
  --rule-2: rgb(236 230 216 / 0.26);
  --gold: #c9a05a;
  --gold-ink: #dbb574;
  --tint: rgb(201 160 90 / 0.08);
  --tint-2: rgb(201 160 90 / 0.16);
  --error: #e8957c;
  --sheet: #f4f0e7;
  --sheet-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 32px -10px rgb(0 0 0 / 0.6);
  --backdrop: rgb(0 0 0 / 0.62);

  color-scheme: dark;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 16px);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg, canvas { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

::selection { background: var(--tint-2); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Headings that only take focus so screen readers announce them */
[tabindex="-1"]:focus-visible { outline: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

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

.skip {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn:active { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-quiet { border-color: var(--rule-2); }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn-solid:active { background: color-mix(in srgb, var(--ink) 76%, var(--bg)); }
.btn .icon { width: 15px; height: 15px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 14px/1.3 var(--font-sans);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.15s var(--ease), color 0.15s var(--ease);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link .icon { transition: transform 0.2s var(--ease); }
.text-link:hover .icon-arrow { transform: translateX(3px); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  transition: background-color 0.15s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.icon-btn .icon { width: 18px; height: 18px; }

/* Masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s var(--ease), border-color 0.3s var(--ease);
  view-transition-name: masthead;   /* stays put while pages change beneath it */
}
/* On the front page the hairline only appears once the page has moved */
.page-home .masthead:not(.is-scrolled) { border-bottom-color: transparent; }
/* Over the night plate the masthead is clear, with light type */
.masthead.is-over-night {
  --bg: transparent;
  --ink: #f3efe7;
  --ink-2: #c7bead;
  --rule: transparent;
  --gold: #c9a05a;
  border-bottom-color: transparent;
}
/* once the page moves, a smoked glass so the headline passes cleanly beneath */
.masthead.is-over-night.is-scrolled {
  background: rgb(7 8 11 / 0.74);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--masthead-h);
  padding-top: env(safe-area-inset-top, 0px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.012em;
}
.brand-sub {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.site-nav .btn { margin-left: 8px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  /* One screen tall, but never a vast empty block on tall portrait monitors */
  min-height: min(calc(100svh - var(--masthead-h)), 960px);
  padding-block: clamp(32px, 5vh, 64px) clamp(24px, 4vh, 48px);
}
.hero.no-globe { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(56px, 10vh, 120px); }

.eyebrow {
  margin-bottom: clamp(20px, 3vh, 32px);
  font: 600 12px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.hero-title {
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.hero-title em { font-style: italic; font-weight: 400; }
/* Each line rises out of its own mask when the page opens */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span { display: block; }
.js .hero-title .line > span { animation: line-rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.js .hero-title .line:nth-child(2) > span { animation-delay: 0.09s; }
.js .hero .eyebrow, .js .hero-lede, .js .hero .hero-actions { animation: fade-rise 0.8s var(--ease) both; }
.js .hero .eyebrow { animation-delay: 0.02s; }
.js .hero-lede { animation-delay: 0.22s; }
.js .hero .hero-actions { animation-delay: 0.32s; }
@keyframes line-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-lede {
  max-width: 34ch;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(28px, 4vh, 44px);
}

/* The front page: a night plate with the Earth turning in it. The plate is
   dark in both themes; it redefines the colour tokens locally, so the shared
   type, buttons and links follow without rules of their own. */
/* The front page is a single screen: the plate runs up under the masthead
   and down to a small footer set in the same night colours */
.page-home {
  --bg: #111821;
  --ink: #e9e5dc;
  --ink-2: #c3beb4;
  --ink-3: #a9a398;
  --rule: rgb(233 229 220 / 0.12);
  --rule-2: rgb(233 229 220 / 0.24);
  --gold: #b9a07a;
  --gold-ink: #cbb18b;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  color-scheme: dark;
}
.page-home main { display: flex; flex: 1 0 auto; flex-direction: column; margin-top: calc(-1 * var(--masthead-h)); }
.page-home .hero.night { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-home .night-grid { flex: 1 0 auto; }
.page-home .plate-stage { max-width: min(66svh, 720px); }
.page-home .site-footer { margin-top: 0; background: #141a21; }
.page-home .footer-inner { padding-top: 14px; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); border-top: 0; }
.page-home .disclaimer, .page-home .colophon { font-size: 12px; color: var(--ink-3); }
.page-home .disclaimer strong { color: var(--ink-2); }
.hero.night {
  --bg: #111821;
  --ink: #e9e5dc;
  --ink-2: #c3beb4;
  --ink-3: #a9a398;
  --rule: rgb(233 229 220 / 0.12);
  --rule-2: rgb(233 229 220 / 0.24);
  --gold: #b9a07a;
  --gold-ink: #cbb18b;
  --tint: rgb(185 160 122 / 0.09);
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: var(--masthead-h) 0 0;
  color: var(--ink);
  color-scheme: dark;
  background:
    radial-gradient(58% 64% at 70% 44%, rgb(42 60 78 / 0.38), rgb(42 60 78 / 0) 70%),
    radial-gradient(46% 56% at 8% 96%, rgb(185 160 122 / 0.045), rgb(185 160 122 / 0) 70%),
    linear-gradient(180deg, #10151c 0%, #111821 60%, #141a21 100%);
}
/* a gold hairline where the plate meets the page */
.hero.night::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(185 160 122 / 0), rgb(185 160 122 / 0.25) 30%, rgb(185 160 122 / 0.25) 70%, rgb(185 160 122 / 0));
}
.night-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate3d(0, var(--stars-y, 0px), 0);
}
.night-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(16px, 3vw, 56px);
  padding-block: clamp(16px, 3vh, 40px) clamp(4px, 1.5vh, 16px);
}
.hero.night .hero-copy { position: relative; z-index: 2; max-width: 36rem; }
/* Type for reading at a glance: the display face at its largest optical
   size, a measure of about 60 characters, and generous leading */
.hero.night .eyebrow { margin-bottom: clamp(18px, 2.6vh, 28px); font-size: 12px; letter-spacing: 0.2em; }
.hero.night .hero-title {
  font-size: clamp(40px, 3.1vw + 26px, 80px);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  line-height: 1.02;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.hero.night .hero-title em { font-weight: 360; letter-spacing: -0.018em; color: var(--gold-ink); }
.hero.night .hero-lede {
  max-width: 30em;
  margin-top: clamp(20px, 3vh, 30px);
  font-size: clamp(18px, 0.35vw + 15px, 20px);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero.night .hero-actions { margin-top: clamp(28px, 4vh, 40px); }
.hero.night .hero-actions .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.hero.night .hero-actions .text-link { font-size: 15px; }
.hero.no-globe .night-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(56px, 10vh, 120px); }

/* The Earth */
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
}
.plate-stage {
  position: relative;
  width: 100%;
  max-width: min(76svh, 760px);
  aspect-ratio: 1 / 1;
  min-height: 280px;
  cursor: grab;
  touch-action: pan-y;
  view-transition-name: globe;  /* shrinks into the emblem on the library page */
}
.plate-stage:focus-visible { outline: none; }
/* the focus ring is drawn round the Earth itself, not the square it sits in */
.plate-stage:focus-visible::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: calc(var(--earth-r, 36%) * 2.34);
  height: calc(var(--earth-r, 36%) * 2.34);
  border: 2px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.plate-stage.is-dragging { cursor: grabbing; }
.plate-stage canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.plate.is-ready .plate-stage canvas { opacity: 1; }
.plate.is-unavailable { display: none; }

/* Sections */

.section { padding-block: clamp(40px, 5vw, 72px); }
.section:first-of-type { padding-top: clamp(24px, 3vw, 40px); }

.section-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  margin-bottom: clamp(24px, 3.2vw, 44px);
}
/* The rule is drawn across like a pen stroke when the section comes into view */
.js .section-head { border-top-color: transparent; }
.js .section-head::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.js .section-head.is-in::before { transform: none; }
.section-label {
  font: 600 12px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-meta {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.section-link { min-height: 0; font-size: 13px; }

.kicker {
  margin: 0;
  font: 500 11.5px/1.7 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kicker .cat { color: var(--gold-ink); font-weight: 600; }
.kicker .dot { color: var(--ink-3); padding: 0 0.15em; }
.draft-tag {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
  padding: 2px 7px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font: 600 10px/1.4 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* Rating colour: BUY carries the gold, the others stay in ink */
.rating { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.06em; }
.rating-buy { color: var(--gold-ink); }

/* Latest report */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.lead.no-side, .reader-head.no-side { grid-template-columns: minmax(0, 1fr); }
.lead-title {
  margin-top: 16px;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lead-title a { text-decoration: none; }
.lead-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.lead-company {
  margin-top: 12px;
  font-size: 20px;
  font-style: italic;
  color: var(--ink-2);
}
.lead-summary {
  max-width: 62ch;
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.62;
  hyphens: auto;
}
.lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 32px;
}
.file-meta { font: 400 13px/1.4 var(--font-sans); color: var(--ink-2); }

/* The investment-summary ledger, set like a printed sidebar */
.ledger {
  padding: 18px 0 14px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ledger-label {
  font: 600 11px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ledger-ticker {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.ledger-sector { margin-top: 8px; font-size: 15px; font-style: italic; line-height: 1.4; color: var(--ink-2); }
.ledger dl { margin: 14px 0 0; }
.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font: 400 14px/1.35 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.ledger-row dt { display: flex; flex: 1; align-items: baseline; gap: 8px; color: var(--ink-2); min-width: 0; }
.ledger-row dt::after {
  content: "";
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted var(--rule-2);
  transform: translateY(-4px);
}
.ledger-row dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }

/* Report index */

.index-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: -12px 0 0;
  padding-bottom: 14px;
}
.filters { display: flex; flex-wrap: wrap; gap: 0 22px; }
.filter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  padding: 12px 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: 400 14.5px/1 var(--font-sans);
  color: var(--ink-2);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.filter:hover { color: var(--ink); border-bottom-color: var(--rule-2); }
.filter[aria-pressed="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.filter-n { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 320px);
  border-bottom: 1px solid var(--ink);
  color: var(--ink-2);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search:focus-within { border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); color: var(--ink); }
.search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 400 15px/1 var(--font-sans);
  color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search input:focus-visible { outline: none; }
.search-clear {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
}
.search-clear:hover { color: var(--ink); }

.report-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }

.report {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) minmax(180px, 230px);
  gap: 10px clamp(20px, 3vw, 48px);
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--rule);
}
/* A gold bookmark ribbon slips down the left edge of the row being pointed at */
.report::before {
  content: "";
  position: absolute;
  left: calc(-1 * min(var(--gutter), 24px) + 4px);
  top: 30px;
  bottom: 28px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.report:hover::before, .report:focus-within::before { transform: none; }
/* The list settles in, row by row, the first time it is drawn */
.report-list.is-arriving .report { animation: fade-rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 0.05s); }
.report-id { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.report-no {
  font: 500 10.5px/1.2 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.report-exch { margin-left: 6px; font: 500 10.5px/1 var(--font-sans); letter-spacing: 0.12em; color: var(--ink-3); vertical-align: 1px; }
.report-ticker {
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: 0.08em;
}
.report-ticker.is-category { color: var(--gold-ink); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.report-date { font: 400 13px/1.3 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.report-main { min-width: 0; }
.report-title {
  margin-top: 10px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.report-title a { text-decoration: none; }
.report-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.report:hover .report-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.report-blurb {
  max-width: 66ch;
  margin-top: 10px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.report-call {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}
.call {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px 16px;
  margin: 0;
  font: 400 13.5px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.call div { display: contents; }
.call dt { color: var(--ink-2); }
.call dd { margin: 0; font-weight: 600; white-space: nowrap; }
.open-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
}
.open-cue .icon { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.report:hover .open-cue .icon { transform: translateX(3px); }

.report mark {
  background: var(--tint-2);
  color: inherit;
  padding: 0 1px;
  border-radius: 1px;
}

.empty { padding: 56px 0 64px; border-bottom: 1px solid var(--rule); }
.empty-title { font-size: 26px; font-style: italic; }
.empty-text { margin-top: 10px; font: 400 14.5px/1.6 var(--font-sans); color: var(--ink-2); }
.empty .text-link { min-height: 0; }

.index-note { margin-top: 16px; font: 400 13px/1.5 var(--font-sans); color: var(--ink-2); }

/* Coverage: one row per rated company, its current call on the right.
   The whole row opens the latest report; earlier calls keep their own links. */
.cover-company a, .cover-latest a { text-decoration: none; }
.cover-latest {
  margin-top: 10px;
  font: 400 14.5px/1.5 var(--font-sans);
  color: var(--ink-2);
}
.cover-latest a { color: var(--ink); font-family: var(--font-serif); font-size: 17px; font-style: italic; }
.cover-latest a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cover:hover .cover-latest a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.cover-history { position: relative; z-index: 2; margin-top: 18px; padding-top: 12px; border-top: 1px dotted var(--rule-2); }
.cover-history-label {
  font: 600 10.5px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cover-history ol { list-style: none; margin: 6px 0 0; padding: 0; }
.cover-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 4px 0;
  font: 400 13.5px/1.45 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.cover-history a { color: var(--ink); }

/* Author tools on a row: only in author mode, never seen by readers */
.author-tools {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;                 /* above the row's link, so the buttons can be pressed */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 20px;
  margin-top: 4px;
}
.author-note { margin-right: auto; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); }
.tool {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 4px;
}
.tool:hover { color: var(--ink); text-decoration-color: currentColor; }
.tool-danger:hover, .text-link.tool-danger:hover { color: var(--error); }

/* The short note after publishing or deleting */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  font: 500 14px/1.45 var(--font-sans);
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* After saving a draft: publish in one step, or by hand */
.publish-now {
  margin-bottom: 18px;
  padding: 16px 18px 18px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}
.publish-now .hint { margin: 6px 0 14px; }
.by-hand summary {
  padding: 6px 0;
  cursor: pointer;
  font: 500 13.5px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.by-hand summary:hover { color: var(--ink); }
.by-hand[open] summary { margin-bottom: 6px; }

/* Author-only note about problems in reports.js */
.catalog-note {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--gold);
  border-left-width: 3px;
  border-radius: var(--radius);
  font: 400 14px/1.55 var(--font-sans);
  color: var(--ink);
}
.catalog-note p + p { margin-top: 6px; }
.catalog-note-title { font-weight: 600; }
.catalog-note ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
.catalog-note-foot { font-size: 12.5px; color: var(--ink-2); }
.catalog-note code { font: 400 12.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; }

/* About */

.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr);
  gap: clamp(32px, 7vw, 112px);
  align-items: start;
}
.about-text p { max-width: 60ch; font-size: 19px; line-height: 1.66; hyphens: auto; }
.about-text p + p { margin-top: 1em; }
.about-text .about-lede { font-size: clamp(22px, 2vw, 27px); line-height: 1.4; letter-spacing: -0.008em; hyphens: manual; }
.key-title {
  font: 600 11.5px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.key-note { margin-top: 8px; font: 400 14px/1.55 var(--font-sans); color: var(--ink-2); }
.key-list { margin: 16px 0 0; border-top: 1px solid var(--ink); }
.key-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 14.5px/1.45 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.key-row dt { font-weight: 600; letter-spacing: 0.06em; }
.key-row dd { margin: 0; color: var(--ink-2); }
.key-block + .key-block { margin-top: 40px; }

/* Footer */

.site-footer { margin-top: clamp(24px, 4vw, 48px); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 48px;
  padding-top: 20px;
  padding-bottom: 48px;
  border-top: 2px solid var(--ink);
}
.disclaimer { flex: 1 1 520px; max-width: 86ch; font: 400 13px/1.6 var(--font-sans); color: var(--ink-2); }
.disclaimer strong { font-weight: 600; color: var(--ink); }
.colophon { font: 400 13px/1.6 var(--font-sans); color: var(--ink-2); white-space: nowrap; }

/* Reader */

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}
.back:hover { text-decoration: underline; text-underline-offset: 5px; }
.back .icon { transition: transform 0.2s var(--ease); }
.back:hover .icon { transform: translateX(-3px); }

.reader-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(20px, 3vw, 36px) clamp(36px, 5vw, 64px);
}
.reader-title {
  margin-top: 16px;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  overflow-wrap: anywhere;
}
.reader-company { margin-top: 12px; font-size: 21px; font-style: italic; color: var(--ink-2); }
.reader-summary { max-width: 64ch; margin-top: 24px; font-size: 19px; line-height: 1.62; hyphens: auto; }
.reader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.reader-actions .file-meta { margin-left: 4px; }
.local-note { max-width: 60ch; margin-top: 16px; font: 400 13px/1.55 var(--font-sans); color: var(--ink-2); }
.local-tools { display: flex; gap: 20px; margin-top: 4px; }
.local-tools .text-link { font-size: 13px; }

.state {
  padding: clamp(48px, 10vw, 120px) 0;
  text-align: left;
}
.state-title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; }
.state-text { max-width: 56ch; margin-top: 14px; font: 400 15px/1.6 var(--font-sans); color: var(--ink-2); }
.state .hero-actions { margin-top: 28px; }

/* PDF viewer: a full-width desk with the pages set on it */
.viewer {
  position: relative;
  background: var(--bg-sunk);
  border-top: 1px solid var(--ink);
  transition: background-color 0.25s var(--ease);
}
.viewer-bar {
  position: sticky;
  top: var(--masthead-h);
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s var(--ease);
}
.viewer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  min-height: 56px;
}
.viewer-title {
  font: 600 11.5px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.viewer-controls { display: flex; align-items: center; gap: 4px; font: 400 13px/1 var(--font-sans); }
.viewer-status { min-width: 96px; margin-right: 8px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.viewer-controls .icon-btn { width: 40px; height: 40px; border: 1px solid var(--rule-2); }
.viewer-controls .icon-btn:disabled { opacity: 0.35; cursor: default; background: none; }
.viewer-controls .viewer-zoom {
  width: auto;
  min-width: 60px;
  padding: 0 6px;
  border-color: transparent;
  font: 500 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.viewer .icon-min { display: none; }
.viewer.is-fs .icon-min { display: block; }
.viewer.is-fs .icon-max { display: none; }
.viewer-controls .divider { width: 1px; height: 22px; margin: 0 8px; background: var(--rule-2); }

.viewer-scroll { overflow-x: auto; }
.viewer-pages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 16px 72px;
}
.pdf-page {
  position: relative;
  flex: none;
  margin-inline: auto;
  background: var(--sheet);
  box-shadow: var(--sheet-shadow);
}
.pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdf-page-placeholder { display: none; }
.pdf-page.is-loading .pdf-page-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 12.5px/1 var(--font-sans);
  letter-spacing: 0.08em;
  color: #6b655a;
}
.viewer-frame {
  width: 100%;
  height: 88vh;
  border: 0;
  background: var(--sheet);
  box-shadow: var(--sheet-shadow);
}
.viewer-error { padding: 56px 16px 72px; }
.viewer-error .state-title { font-size: 28px; font-style: italic; }

.viewer:fullscreen { overflow: auto; background: var(--bg-sunk); }
.viewer:fullscreen .viewer-bar { top: 0; }
.viewer:-webkit-full-screen { overflow: auto; background: var(--bg-sunk); }
.viewer:-webkit-full-screen .viewer-bar { top: 0; }

/* pdf.js text layer: invisible text over the page image so it can be
   selected, copied and found with the browser's search. */
.textLayer {
  position: absolute;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 2;
}
.textLayer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgb(168 122 51 / 0.32); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }
.hiddenCanvasElement { position: absolute; top: 0; left: 0; width: 0; height: 0; display: none; }

/* Dialogs */

.sheet {
  width: min(680px, calc(100vw - 24px));
  max-height: min(92vh, 940px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.45);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--backdrop); }
html:has(dialog[open]) { overflow: hidden; }
.sheet[open] { animation: sheet-in 0.22s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--rule);
}
.sheet-title { font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; }
.sheet-sub { margin-top: 8px; font: 400 13.5px/1.55 var(--font-sans); color: var(--ink-2); }
.sheet-close { margin: -8px -10px 0 0; }
.sheet-sub .text-link { min-height: 0; font-size: inherit; }
.sheet-sub + .sheet-sub { margin-top: 4px; color: var(--gold-ink); }
.sheet-body { padding: 22px 28px 8px; }
.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 28px 24px;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid-call { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; gap: 18px 14px; }
.fieldset { margin: 26px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--rule); }
.fieldset legend {
  float: left;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  font: 600 11.5px/1.4 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fieldset legend + * { clear: both; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field-label { font: 500 13px/1.3 var(--font-sans); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.hint { font: 400 12.5px/1.45 var(--font-sans); color: var(--ink-2); }
.input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: transparent;
  font: 400 15px/1.35 var(--font-sans);
  color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input:hover { border-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.input:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.input::placeholder { color: var(--ink-3); }
textarea.input { min-height: 116px; resize: vertical; line-height: 1.5; }
select.input {
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.input option { background: var(--bg); color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--error); }
.field-error { font: 500 12.5px/1.45 var(--font-sans); color: var(--error); }
.field-error:empty { display: none; }
.input.upper { text-transform: uppercase; }

/* File picker */
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.file-drop:hover, .file-drop.is-over { border-color: var(--gold); background: var(--tint); }
.file-drop:focus-within { border-color: var(--gold); border-style: solid; }
.file-drop.has-file { border-style: solid; border-color: var(--rule-2); }
.file-drop[aria-invalid="true"] { border-color: var(--error); }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop .icon { width: 22px; height: 22px; color: var(--ink-2); }
.file-drop-text { font: 400 14px/1.4 var(--font-sans); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.file-drop-text strong { font-weight: 600; color: var(--ink); }

/* Success state */
.done-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
.done-steps li {
  position: relative;
  padding: 0 0 18px 34px;
  font: 400 14.5px/1.55 var(--font-sans);
  counter-increment: step;
}
.done-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 11.5px/1 var(--font-sans);
}
.done-steps code, .sheet code {
  padding: 1px 5px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font: 400 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  overflow-wrap: anywhere;
}
.entry {
  margin: 10px 0 0;
  max-height: 220px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font: 400 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.copy-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.copy-status { font: 400 13px/1.3 var(--font-sans); color: var(--ink-2); }

.confirm { width: min(460px, calc(100vw - 24px)); }
.confirm .sheet-body { padding-bottom: 0; }
.confirm p { font: 400 15px/1.6 var(--font-sans); color: var(--ink-2); }
.btn-danger { border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }

/* Page headers (library and about) */

.page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(18px, 3vw, 36px);
  align-items: start;
  padding-block: clamp(40px, 7vw, 88px) clamp(24px, 3.5vw, 44px);
}
.page-emblem {
  width: clamp(54px, 5.6vw, 72px);
  height: auto;
  margin-top: 8px;
  color: var(--ink);
  view-transition-name: globe;   /* the front-page globe lands here */
}
.page-emblem .gold { stroke: var(--gold); }
.page-title { font-size: clamp(40px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.022em; }
.page-title em { font-style: italic; }
.page-lede { max-width: 56ch; margin-top: 16px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); }
.page-folio {
  margin-top: 20px;
  font: 500 11.5px/1.6 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.page-folio .dot { color: var(--ink-3); padding: 0 0.3em; }
.js .page-head > * { animation: fade-rise 0.7s var(--ease) both; }
.js .page-head > :nth-child(2) { animation-delay: 0.06s; }

/* About page: a drop cap opens the first paragraph */
.about-lede::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  font-size: 3.15em;
  line-height: 0.8;
  font-weight: 500;
  color: var(--ink);
}

/* Search: a quiet hint that "/" jumps to the box */
.kbd {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  font: 500 11px/1 var(--font-sans);
  color: var(--ink-3);
}
.search:focus-within .kbd, .search.has-value .kbd { display: none; }
@media (hover: none) { .kbd { display: none; } }

/* Reader: the rule under the viewer bar fills in gold as the report is read */
.viewer-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(var(--read, 0));
  transform-origin: left center;
  transition: transform 0.12s linear;
}
.reader-title { view-transition-name: report-title; }

/* Pages still being drawn catch the light, like paper */
.pdf-page.is-loading {
  background-image: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: sheen 1.8s ease-in-out infinite;
}
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* Page transitions (browsers with cross-document view transitions) */

@view-transition { navigation: auto; }
/* The old page is mostly gone before the new one settles in */
::view-transition-old(root) { animation: 0.24s cubic-bezier(0.4, 0, 1, 1) both vt-leave; }
::view-transition-new(root) { animation: 0.5s cubic-bezier(0.2, 0.7, 0.1, 1) 0.16s both vt-enter; }
html[data-nav="back"]::view-transition-old(root) { animation-name: vt-leave-back; }
html[data-nav="back"]::view-transition-new(root) { animation-name: vt-enter-back; }
@keyframes vt-leave { to { opacity: 0; transform: translateY(-18px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(26px); } }
@keyframes vt-leave-back { to { opacity: 0; transform: translateY(18px); } }
@keyframes vt-enter-back { from { opacity: 0; transform: translateY(-26px); } }
/* The masthead does not move between pages */
::view-transition-group(masthead) { animation: none; }
::view-transition-old(masthead) { display: none; }
::view-transition-new(masthead) { animation: none; }
/* Shared elements glide into place: the globe into its emblem, a report title into its page */
::view-transition-group(globe),
::view-transition-group(report-title) { animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.1, 1); }
/* The globe hands over to its engraving on the way down, not all at once */
::view-transition-old(globe) { animation: 0.5s cubic-bezier(0.4, 0, 1, 1) both vt-fade-out; }
::view-transition-new(globe) { animation: 0.45s cubic-bezier(0.2, 0.7, 0.1, 1) 0.3s both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* A travelling title is one piece of type growing into place, not two fading copies */
::view-transition-old(report-title) { animation: none; opacity: 0; }
::view-transition-new(report-title) { animation: none; }
/* Titles that travel between pages are only as wide as their words */
.report-title, .lead-title, .reader-title { width: fit-content; max-width: 100%; }
/* When a shared element has no partner on the other page, it moves with the
   page: same timing, same direction */
::view-transition-new(report-title):only-child,
::view-transition-new(globe):only-child { animation: 0.5s cubic-bezier(0.2, 0.7, 0.1, 1) 0.16s both vt-enter; }
::view-transition-old(report-title):only-child,
::view-transition-old(globe):only-child { animation: 0.24s cubic-bezier(0.4, 0, 1, 1) both vt-leave; opacity: 1; }
html[data-nav="back"]::view-transition-new(report-title):only-child,
html[data-nav="back"]::view-transition-new(globe):only-child { animation-name: vt-enter-back; }
html[data-nav="back"]::view-transition-old(report-title):only-child,
html[data-nav="back"]::view-transition-old(globe):only-child { animation-name: vt-leave-back; }
/* Back on the front page the 3D globe is not drawn yet, so the small engraving
   gives way quickly instead of being blown up and blurred */
html:has(body.page-home)::view-transition-old(globe) { animation-duration: 0.15s; }

/* A short camera move between the night landing and the reading pages.
   The page that leaves grows faintly; the next one settles into focus.
   Both directions use the same rhythm, including the separate masthead. */
html.from-home::view-transition-old(root),
html.from-home::view-transition-old(masthead) {
  display: block;
  animation: 0.52s cubic-bezier(0.22, 1, 0.36, 1) both vt-home-away;
}
html.from-home::view-transition-new(root),
html.from-home::view-transition-new(masthead) {
  animation: 0.52s cubic-bezier(0.22, 1, 0.36, 1) both vt-page-arrive;
}
html:has(body.page-home)::view-transition-old(root),
html:has(body.page-home)::view-transition-old(masthead) {
  display: block;
  animation: 0.52s cubic-bezier(0.22, 1, 0.36, 1) both vt-page-away;
}
html:has(body.page-home)::view-transition-new(root),
html:has(body.page-home)::view-transition-new(masthead) {
  animation: 0.52s cubic-bezier(0.22, 1, 0.36, 1) both vt-home-arrive;
}
@keyframes vt-home-away { to { opacity: 0; transform: scale(1.025); } }
@keyframes vt-page-arrive { from { opacity: 0; transform: scale(0.985); } }
@keyframes vt-page-away { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-home-arrive { from { opacity: 0; transform: scale(1.025); } }

/* Switching theme spreads the new colours out from the switch */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }
html.theme-vt * { view-transition-name: none !important; }
html.theme-vt *, html.theme-vt *::before, html.theme-vt *::after { transition: none !important; }

/* A quieter scrollbar that sits on the paper */
html { scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }

/* The wire: headlines by day, each opening at its source */

.wire-day + .wire-day { margin-top: clamp(32px, 3.4vw, 48px); }
.wire-day-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font: 600 12px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.wire-day-label span { font-weight: 400; letter-spacing: 0.12em; color: var(--ink-2); }
.wire-list { list-style: none; margin: 0; padding: 0; }
.wire-list.is-brief { border-top: 1px solid var(--ink); }
.wire-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 clamp(16px, 2.4vw, 32px);
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--rule);
}
.wire-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * min(var(--gutter), 24px) + 4px);
  top: 16px;
  bottom: 17px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.wire-item:hover::before, .wire-item:focus-within::before { transform: none; }
.wire.is-arriving .wire-day:first-child .wire-item:nth-child(-n + 12) { animation: fade-rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 0.05s); }
.wire-time {
  padding-top: 3px;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.wire-main { min-width: 0; }
.wire-title {
  margin-top: 4px;
  max-width: 72ch;
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.wire-title a { text-decoration: none; }
.wire-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wire-item:hover .wire-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.wire-tail { white-space: nowrap; }
.wire-title .icon { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: 0.04em; color: var(--ink-3); }
.wire { margin-top: clamp(14px, 1.6vw, 22px); }

/* Responsive */

@media (max-width: 1080px) {
  .report { grid-template-columns: 104px minmax(0, 1fr) minmax(170px, 200px); }
}

@media (max-width: 900px) {
  /* Narrow screens open on the globe, with the headline straight after it */
  .night-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 4px;
    padding-block: 0 clamp(24px, 5vw, 36px);
  }
  .plate { order: -1; }
  .plate-stage { max-width: min(100%, 60svh); min-height: 0; }
  .hero.night .hero-copy { padding-top: 8px; }
  .lead, .reader-head, .about { grid-template-columns: minmax(0, 1fr); }
  .lead-side, .reader-side { max-width: 460px; }
}

/* A phone turned sideways still opens on the proposition and the Earth
   together. The portrait stack would otherwise spend the whole first screen
   on the globe and leave the heading below the fold. */
@media (max-height: 500px) and (min-width: 600px) {
  .night-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; padding-block: 8px; }
  .plate { order: initial; }
  .page-home .plate-stage { max-width: min(44vw, calc(100svh - var(--masthead-h) - 24px)); }
  .hero.night .hero-copy { padding-top: 0; }
  .hero.night .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
  .hero.night .hero-title { font-size: clamp(36px, 5.4vw, 52px); }
  .hero.night .hero-lede { margin-top: 12px; font-size: 15px; line-height: 1.45; }
  .hero.night .hero-actions { margin-top: 14px; }
}

@media (max-width: 760px) {
  :root { --masthead-h: calc(58px + env(safe-area-inset-top, 0px)); }
  body { font-size: 17px; }
  .brand-name { font-size: 24px; }
  .brand-sub { display: none; }
  .site-nav a { padding: 0 9px; }
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-emblem { margin: 0 0 18px; }

  .report {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 24px 0 22px;
  }
  .report-id { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 2px; }
  .report-no { display: none; }
  .report-title { margin-top: 8px; }
  .report-blurb { font-size: 16px; -webkit-line-clamp: 3; }
  .report-call { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px dotted var(--rule-2); }
  .call { display: flex; flex: 1; flex-wrap: wrap; gap: 4px 14px; text-align: left; }
  .call div { display: flex; gap: 6px; }
  .open-cue { white-space: nowrap; }

  .index-tools { flex-direction: column; align-items: stretch; margin-top: -16px; }
  /* On phones the search sits in a light box, so three rules do not stack up */
  .search { width: 100%; padding: 0 4px 0 12px; border: 1px solid var(--rule-2); border-radius: var(--radius); }
  .search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
  .filters { gap: 0 18px; }
  .wire-item { grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 14px 0 15px; }
  .wire-title { font-size: 18px; }

  .viewer-bar-inner { min-height: 52px; }
  .viewer-title { display: none; }
  .viewer-controls { width: 100%; justify-content: space-between; }
  .viewer-status { min-width: 0; text-align: left; margin-right: auto; }
  .viewer-pages { padding: 16px 8px 48px; gap: 14px; }

  .sheet-head, .sheet-body, .sheet-foot { padding-left: 20px; padding-right: 20px; }
  .form-grid, .form-grid-call { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones have room for three links; Coverage is reached from the library there */
@media (max-width: 560px) {
  .site-nav .nav-coverage { display: none; }
}

@media (max-width: 420px) {
  .form-grid, .form-grid-call { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; }
  .site-nav .btn { padding: 0 12px; }
  .site-nav a { padding: 0 7px; }
  /* Room for the author's Add report button on the smallest phones */
  .is-author .site-nav .nav-about, .is-author .site-nav a[href$="wire.html"]:not([aria-current]) { display: none; }
  .page-wire .site-nav [data-add-report] { display: none; }   /* reports are added from the other pages */
}

@media (max-width: 360px) {
  :root { --masthead-h: calc(102px + env(safe-area-inset-top, 0px)); }
  .masthead-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 32px 44px;
    align-content: center;
    gap: 0;
  }
  .site-nav { width: 100%; justify-content: space-between; min-width: 0; }
  .site-nav a { padding-inline: 3px; font-size: 13px; }
  .site-nav .btn { margin-left: 0; }
  .is-author .site-nav .nav-about,
  .is-author .site-nav a[href$="wire.html"]:not([aria-current]) { display: inline-flex; }
  .is-author .site-nav [data-add-report] {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }
  .is-author .site-nav [data-add-report]::before { content: "+"; font: 500 27px/1 var(--font-sans); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .masthead, .plate, .hero-actions, .index-tools, .site-nav, .viewer, .lead-actions, .reader-actions, .night-stars { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; }
  .page-home main { margin-top: 0; }
  .hero.night { --ink: #000; --ink-2: #333; --ink-3: #555; --gold-ink: #7a5314; padding-top: 0; background: none; }
}