/* Braldu Stone: braldustone.com
   Palette drawn from the Karakoram above Aliabad, Hunza: granite greys,
   sunset golden-orange on the high peaks, snow white, deep glacial blue.
   No external requests: system fonts only, all art is inline SVG. */

:root {
  /* granite */
  --stone-900: #14181c;
  --stone-800: #1f262c;
  --stone-700: #333c44;
  --stone-600: #47525b;
  --stone-500: #5e6a73;
  --stone-400: #8a959d;
  --stone-300: #b9c1c7;
  --stone-200: #dce1e4;
  --stone-100: #eff2f4;

  /* snow */
  --snow: #f7fafb;
  --white: #ffffff;

  /* glacial meltwater */
  --glacier-900: #0b2434;
  --glacier-800: #0d3248;
  --glacier-700: #10405c;
  --glacier-500: #1b6c92;
  --glacier-400: #2f8bb4;
  --glacier-300: #4fa3c4;
  /* Light enough to clear 4.5:1 over the darkened photo scrims. The older,
     bluer #d6e8f0 measured 1.45:1 against the hero image on a phone. */
  --glacier-100: #e9f2f7;

  /* granite at sunset */
  --gold-700: #9c5a14;
  --gold-600: #c0741b;
  --gold-500: #de8f27;
  --gold-400: #efa945;
  --gold-100: #fbead2;

  --fg: var(--stone-900);
  --fg-muted: var(--stone-600);
  --bg: var(--white);
  --bg-alt: var(--snow);
  --rule: var(--stone-200);
  --accent: var(--gold-600);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Field-record voice: used for label keys, step numbers and photo credits,
     the places where the page should read as documentation rather than prose. */
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
    Consolas, monospace;

  --measure: 34rem;
  --page: 68rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 3.85rem);
}
h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
}
h3 {
  font-size: 1.1875rem;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

a {
  color: var(--glacier-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--gold-700);
}

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

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--stone-900);
  color: var(--white);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip:focus {
  left: 0;
}

/* ── masthead ─────────────────────────────────────────────── */

.masthead {
  position: relative;
  z-index: 10;
}

/* Mirrors .footer::before, so the page is banded top and bottom. Full bleed and
   the same lattice, replacing the 1px rule that used to close the header. */
.masthead::after {
  content: "";
  display: block;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M14 7 L21 0 L28 7 L21 14 Z' fill='none' stroke='%23efa945' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.4;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover {
  color: var(--gold-400);
}
.wordmark svg {
  display: block;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  flex-wrap: wrap;
}

/* :not(.btn) throughout. These selectors outrank .btn--gold's own colour, and
   without the exclusion the masthead button renders stone-200 on gold (1.98:1)
   and gold-on-gold on hover. */
.nav a:not(.btn) {
  color: var(--stone-200);
  text-decoration: none;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] {
  color: var(--gold-400);
}
.nav a.btn {
  text-decoration: none;
}

/* on light interior pages the masthead sits on stone, not sky */
.masthead--solid {
  background: var(--stone-900);
}

/* On a phone the default layout stacks into three tall rows and pushes the
   hero off the fold. Tighten it: wordmark on its own line, then a compact
   two-row nav. */
@media (max-width: 48rem) {
  .masthead__inner {
    min-height: 0;
    padding-block: 0.85rem;
    gap: 0.75rem;
  }
  .wordmark {
    width: 100%;
    margin-right: 0;
  }
  .nav {
    width: 100%;
    gap: 0.5rem 1.1rem;
  }
  .nav a {
    font-size: 0.875rem;
  }
  .nav .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
  }
  .hero__body {
    padding-block: clamp(2.5rem, 8vh, 4rem) clamp(6rem, 18vh, 9rem);
  }
}

/* ── buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn--gold {
  background: var(--gold-500);
  color: var(--stone-900);
}
.btn--gold:hover {
  background: var(--gold-400);
  color: var(--stone-900);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.btn--dark {
  background: var(--glacier-900);
  color: var(--white);
}
.btn--dark:hover {
  background: var(--glacier-700);
  color: var(--white);
}

/* ── hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--glacier-900);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  display: block;
}
/* Legibility scrim. The source photo is dark at the base and bright in the
   sky, so this is a two-stop gradient rather than a flat wash. It protects
   the headline without flattening the sunset. */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgba(11, 36, 52, 0.88) 0%,
      rgba(11, 36, 52, 0.7) 38%,
      rgba(11, 36, 52, 0.62) 60%,
      rgba(11, 36, 52, 0.84) 100%
    ),
    linear-gradient(to right, rgba(11, 36, 52, 0.72), rgba(11, 36, 52, 0.04) 68%);
}

/* On a phone the headline and lede span the full width, so the left-weighted
   wash above does not cover them and text lands on bright sky and snow. The
   old scrim measured 1.45:1 there. This bounds the worst-case background. */
@media (max-width: 48rem) {
  .hero__art::after {
    background: linear-gradient(
      to bottom,
      rgba(11, 36, 52, 0.9) 0%,
      rgba(11, 36, 52, 0.85) 45%,
      rgba(11, 36, 52, 0.9) 100%
    );
  }
}

.hero__body {
  padding-block: clamp(4rem, 13vh, 8rem) clamp(9rem, 26vh, 15rem);
}

.hero h1 {
  color: var(--white);
  max-width: 16ch;
}

.hero__lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  color: var(--glacier-100);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 1.1rem;
}

.eyebrow--dark {
  color: var(--gold-700);
}

/* ── trust strip ──────────────────────────────────────────── */

.strip {
  background: var(--stone-900);
  color: var(--stone-200);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.strip li {
  padding: 1.5rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.strip li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 1.5rem;
}

@media (max-width: 52rem) {
  .strip li + li {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.strip svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--gold-500);
}

.strip strong {
  display: block;
  color: var(--white);
  font-weight: 600;
}

/* ── sections ─────────────────────────────────────────────── */

.section {
  padding-block: clamp(3.5rem, 9vw, 6rem);
  border-top: 1px solid var(--rule);
}

.section--alt {
  background: var(--bg-alt);
}

.section--dark {
  background: var(--glacier-900);
  color: var(--glacier-100);
  border-top: 0;
}
.section--dark h2 {
  color: var(--white);
}
/* :not(.btn) matters. Without it this rule outranks .btn--gold's own colour
   and paints gold text on a gold button, which measured 1.29:1. */
.section--dark a:not(.btn) {
  color: var(--gold-400);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: 2.5rem;
}

.section__head p:last-child {
  margin-bottom: 0;
  color: var(--fg-muted);
}

.section--dark .section__head p:last-child {
  color: var(--glacier-100);
}

/* ── the checks ───────────────────────────────────────────── */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}

.checks li {
  background: var(--bg);
  padding: 1.5rem;
}

.section--alt .checks li {
  background: var(--white);
}

.checks h3 {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.checks .num {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-600);
  border: 1px solid var(--gold-100);
  background: var(--gold-100);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
  flex: none;
}

.checks p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.55;
}

.note {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold-500);
  font-size: 0.9375rem;
  color: var(--fg-muted);
  max-width: var(--measure);
}
.note p:last-child {
  margin-bottom: 0;
}

/* ── two-column prose ─────────────────────────────────────── */

.cols {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}

.cols h3 {
  margin-bottom: 0.5rem;
}

.cols p:last-child {
  margin-bottom: 0;
}

/* ── localities ───────────────────────────────────────────── */

.localities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.localities li {
  border-top: 2px solid var(--glacier-500);
  padding-top: 1rem;
}

.localities h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.3rem;
}

.localities .where {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  margin-bottom: 0.6rem;
}

.localities p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* ── callout / cta ────────────────────────────────────────── */

.cta {
  text-align: center;
}
.cta .measure {
  margin-inline: auto;
}
.cta .hero__actions {
  justify-content: center;
}

/* ── page header for interior pages ───────────────────────── */

.pagehead {
  background: var(--stone-900);
  color: var(--white);
  padding-block: clamp(3rem, 8vw, 5rem);
}
.pagehead h1 {
  color: var(--white);
  margin-bottom: 0.5rem;
}
.pagehead p {
  color: var(--stone-300);
  max-width: 48ch;
  margin-bottom: 0;
  font-size: 1.0625rem;
}

/* ── prose blocks ─────────────────────────────────────────── */

.prose {
  max-width: var(--measure);
}
.prose h2 {
  margin-top: 2.5rem;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose ul {
  padding-left: 1.15rem;
  margin: 0 0 1.15em;
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose li::marker {
  color: var(--gold-600);
}

.contact-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold-500);
  background: var(--white);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.contact-card h3 {
  margin-bottom: 0.35rem;
}
.contact-card p {
  margin-bottom: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}
.contact-card a.email {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--glacier-700);
  word-break: break-word;
}

/* ── photographic bands ───────────────────────────────────── */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--glacier-900);
  color: var(--white);
}

.band__art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.band__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.band__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 36, 52, 0.92) 0%,
    rgba(11, 36, 52, 0.82) 45%,
    rgba(11, 36, 52, 0.55) 100%
  );
}

/* Same reason as the hero: at phone widths the copy runs the full width and
   reaches the light end of the gradient. Measured 2.9:1 before this. */
@media (max-width: 48rem) {
  .band__art::after {
    background: linear-gradient(
      to bottom,
      rgba(11, 36, 52, 0.9),
      rgba(11, 36, 52, 0.86)
    );
  }
}

.band__body {
  padding-block: clamp(4rem, 11vw, 7rem);
}

.band h2 {
  color: var(--white);
}
.band p {
  color: var(--glacier-100);
}
.band .measure p:last-child {
  margin-bottom: 0;
}

/* thin decorative rule of photography, no text over it */
.rule-band {
  height: clamp(9rem, 22vw, 16rem);
  position: relative;
  overflow: hidden;
  background: var(--stone-200);
}
.rule-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
/* The bottom stop is heavier than the top because the photo credit sits down
   there over open sky. At 0.28 the credit measured 4.07:1 against the Hunza
   valley photo, which is a brighter image than the one this band carried
   before. Any swap of the band image must be re-checked with check:site. */
.rule-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 24, 28, 0.28),
    rgba(20, 24, 28, 0) 45%,
    rgba(20, 24, 28, 0.36) 72%,
    rgba(20, 24, 28, 0.66)
  );
}

.figure {
  margin: 0;
}
.figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
}
.figure figcaption {
  font-size: 0.8125rem;
  color: var(--fg-muted);
  margin-top: 0.6rem;
  line-height: 1.45;
}

/* ── supply chain comparison ──────────────────────────────── */

.chains {
  display: grid;
  gap: 1.5rem;
}

.chain {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: 1.5rem;
}
.section--alt .chain {
  background: var(--white);
}

.chain--ours {
  border-color: var(--gold-500);
  border-top-width: 3px;
}

.chain__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 1.15rem;
}

.chain__label h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.chain__hops {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-500);
  white-space: nowrap;
}
.chain--ours .chain__hops {
  color: var(--gold-700);
}

.chain__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.chain__steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chain__steps span {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--stone-300);
  background: var(--stone-100);
  color: var(--stone-600);
  border-radius: 2px;
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* Arrow leads each step rather than trailing it. When the chain wraps, a line
   then begins with "→ You" instead of ending on a dangling arrow. */
.chain__steps li:not(:first-child)::before {
  content: "→";
  color: var(--stone-400);
  font-size: 0.9375rem;
}

.chain--ours .chain__steps span {
  border-color: var(--gold-500);
  background: var(--gold-100);
  color: var(--gold-700);
  font-weight: 600;
}
.chain--ours .chain__steps li:not(:first-child)::before {
  color: var(--gold-600);
}

/* the two end points are the same in both chains, so mark them and the
   comparison reads as "same start, same finish, different middle" */
.chain__steps span.is-anchor {
  background: var(--white);
  border-color: var(--stone-400);
  color: var(--stone-700);
  font-weight: 600;
}
.chain--ours .chain__steps span.is-anchor {
  background: var(--white);
  border-color: var(--gold-500);
  color: var(--stone-800);
}

/* ── photo credit, burned onto the image ─────────────────── */

/* Every landscape on this site was taken by someone else. The credit sits on
   the photograph itself so it can never read as our own work. */
.credit {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(11, 36, 52, 0.55);
  padding: 0.28rem 0.5rem;
  border-radius: 2px;
  max-width: calc(100% - 1.4rem);
}
.credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.credit a:hover {
  color: var(--gold-400);
}

/* ── specimen record ─────────────────────────────────────── */

/* Modelled on a museum specimen label. Locality is the headline, species is
   the subhead, per the brand direction. */
.record {
  border: 1px solid var(--stone-400);
  background: var(--white);
  padding: 1.5rem;
}

/* A ruled, framed head on the record card. Islamic documentary tradition, from
   ijazah certificates to waqf deeds and merchants' ledgers, banded its documents
   this way, which is the same instinct the rest of this page is built on. */
.record__head {
  margin-bottom: 1.1rem;
}

.record__head::before {
  content: "";
  display: block;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 L6 0 L12 6 L6 12 Z M12 6 L18 0 L24 6 L18 12 Z' fill='none' stroke='%23c0741b' stroke-width='0.9'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.55;
  margin-bottom: 1rem;
}

.record__locality {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.15;
  margin: 0 0 0.2rem;
}

.record__species {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.record__rows {
  margin: 0;
  border-top: 1px solid var(--stone-300);
}

.record__rows > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.35rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.record__rows dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone-500);
  padding-top: 0.2rem;
}

.record__rows dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (max-width: 34rem) {
  .record__rows > div {
    grid-template-columns: 1fr;
  }
}

.record__foot {
  margin: 1.1rem 0 0;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* ── the workings: our own footage ───────────────────────── */

/* Source frames are 832x464 and 1024x576 off handheld phone video, so these
   are deliberately capped in size. Blown up full-bleed they read as soft. */
/* minmax(22rem) resolves to exactly two columns at the 68rem page width, so
   four frames sit as a 2x2 rather than a row of three plus an orphan. At that
   size each still renders below its native width and stays sharp. */
.workings {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  margin: 0;
}

.workings figure {
  margin: 0;
}

.workings img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--stone-200);
  border: 1px solid var(--stone-300);
}

.workings figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.workings figcaption b {
  display: block;
  color: var(--fg);
  font-weight: 600;
}

/* ── candidate specimens: our own photographs ─────────────── */

/* Same treatment as .workings, at 4:3 instead of 16:9. The source files are
   1600x1200 off a phone camera, and forcing them into the 16:9 frame above
   would crop away part of what the caption describes. minmax(17rem) puts the
   three frames in one row at the 68rem page width and stacks them on a phone. */
.specimens {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0;
}

.specimens figure {
  margin: 0;
}

.specimens img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--stone-200);
  border: 1px solid var(--stone-300);
}

.specimens figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.specimens figcaption b {
  display: block;
  color: var(--fg);
  font-weight: 600;
}

.provenance-note {
  margin-top: 2.25rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-500);
  background: var(--white);
  font-size: 0.9375rem;
  max-width: 46rem;
}
.provenance-note p:last-child {
  margin-bottom: 0;
}

/* ── ornament ────────────────────────────────────────────── */

/* A plain diamond lattice, the kind carved into the wooden mosques and fort
   woodwork of Baltistan and Hunza. Deliberately not an arabesque: the local
   tradition here is geometric joinery, and heavy ornament would fight the
   field-notebook direction the rest of the page is built on. */
.ornament {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M14 7 L21 0 L28 7 L21 14 Z' fill='none' stroke='%23c0741b' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.5;
  margin-bottom: 1.75rem;
}

.section--dark .ornament,
.band .ornament {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M14 7 L21 0 L28 7 L21 14 Z' fill='none' stroke='%23efa945' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.6;
}

/* ── greeting ────────────────────────────────────────────── */

/* dir="rtl" governs bidi shaping and must stay. Alignment is separate: without
   these two lines the phrase right-aligns inside the inherited 48ch measure and
   ends up stranded in the middle of the page. */
.greeting {
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 0.15rem;
  text-align: left;
  max-width: none;
}

.pagehead .greeting {
  color: var(--white);
}

.greeting + .greeting-latin {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  margin: 0 0 1.1rem;
}
.pagehead .greeting + .greeting-latin {
  color: var(--stone-300);
}

/* ── numbered manifest ───────────────────────────────────── */

.manifest {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.manifest > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1.35rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}

/* Both scripts, because the field manual the protocol lives in is bilingual and
   the people working from it read Urdu. arabic-indic is a standard CSS counter
   style, so this is real numbering rather than pasted-in glyphs. */
.manifest > li::before {
  content: counter(step, decimal-leading-zero) "\A" counter(step, arabic-indic);
  white-space: pre;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gold-700);
  padding-top: 0.3rem;
}

.manifest h3 {
  margin: 0 0 0.5rem;
}

.manifest p:last-child {
  margin-bottom: 0;
}

.manifest .measure {
  max-width: 44rem;
}

/* ── refusals ────────────────────────────────────────────── */

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

.refusals > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}

.refusals > li::before {
  content: "\00d7";
  font-family: var(--mono);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--gold-600);
}

.refusals h3 {
  margin: 0 0 0.4rem;
}

.refusals p:last-child {
  margin-bottom: 0;
}

/* ── email capture ───────────────────────────────────────── */

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
}

.signup label {
  position: absolute;
  left: -9999px;
}

.signup input[type="email"] {
  flex: 1 1 17rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--stone-400);
  border-radius: 2px;
}

/* Placeholders are text and carry the same 4.5:1 duty. stone-400 on white
   is only 3.06:1. */
.signup input[type="email"]::placeholder {
  color: var(--stone-500);
}

.section--dark .signup input[type="email"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.section--dark .signup input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.signup button {
  cursor: pointer;
}

.form-note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 46ch;
}
.section--dark .form-note {
  color: rgba(255, 255, 255, 0.62);
}

/* honeypot: real people never see it, bots fill it in */
.signup-hp {
  position: absolute;
  left: -9999px;
}

/* ── pledge list ──────────────────────────────────────────── */

.pledge {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pledge li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  color: var(--glacier-100);
}
.pledge li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1rem;
  height: 1px;
  background: var(--gold-500);
}
.pledge li:last-child {
  margin-bottom: 0;
}

/* ── credits table ────────────────────────────────────────── */

.credits {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.credits caption {
  text-align: left;
  color: var(--fg-muted);
  font-size: 0.875rem;
  padding-bottom: 0.85rem;
}
.credits th,
.credits td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.credits th {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom-color: var(--stone-400);
  white-space: nowrap;
}
.credits td:first-child {
  width: 6.5rem;
}
.credits td:first-child img {
  width: 5.5rem;
  height: 3.5rem;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
}
@media (max-width: 40rem) {
  .credits td:first-child {
    display: none;
  }
  .credits th:first-child {
    display: none;
  }
}

/* ── footer ───────────────────────────────────────────────── */

.footer {
  background: var(--stone-900);
  color: var(--stone-400);
  padding-block: 0 2.5rem;
  font-size: 0.875rem;
}

/* Full-bleed lattice closing the page. Edge to edge on purpose: it reads as a
   band of carved joinery across the foot of the document rather than an
   ornament dropped into a column. */
.footer::before {
  content: "";
  display: block;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M14 7 L21 0 L28 7 L21 14 Z' fill='none' stroke='%23efa945' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.4;
  margin-bottom: 3rem;
}

.footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.footer h4 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-300);
  margin: 0 0 0.85rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer li {
  margin-bottom: 0.45rem;
}
.footer a {
  color: var(--stone-300);
  text-decoration: none;
}
.footer a:hover {
  color: var(--gold-400);
}

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  /* stone-500 on stone-900 measured 3.22:1. stone-400 gives 5.83:1. */
  color: var(--stone-400);
}
.footer__legal p {
  margin: 0;
}