@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-narrow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-narrow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-mono-700.woff2") format("woff2");
}
:root {
  --nt-paper: #ffffff;
  --nt-ink: #000000;
  --nt-hazard: #ff6600;
  --nt-hazard-dim: #cc5200;
  --nt-border-heavy: #000000;
  --nt-border-light: #d1d5db;
  --nt-zinc-50: #fafafa;
  --nt-zinc-100: #f4f4f5;
  --nt-zinc-800: #27272a;
  --nt-font-body: 'Archivo Narrow', sans-serif;
  --nt-font-heading: 'Big Shoulders Display', sans-serif;
  --nt-font-mono: 'Roboto Mono', monospace;
  --nt-container-max: 1440px;
  --nt-gutter: 2rem;
  --nt-clause-inset: 164px;
  /* The column IS the reading measure — heading, lede, prose and exhibit all
     share it, so the block has one left AND one right edge. 520px ≈ 74
     characters per line in Archivo Narrow. */
  --nt-measure: 32.5rem;
  --nt-plate: 46rem;   /* exhibit breakout, centred on the same axis */
  --nt-border-w: 2px;
  --nt-border-w-heavy: 4px;
  --nt-dur-instant: 0ms;
  --nt-reveal-dur: 420ms;
  --nt-reveal-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--nt-font-body);
  background-color: var(--nt-paper);
  color: var(--nt-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--nt-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 0.95;
}

/* Reversed-out phrase inside a heading. Needs its own leading: at the
   heading's 0.95 line-height the inline background box is taller than the
   line box and paints over the descenders of the line above it. */
.nt-head-mark {
  background: var(--nt-ink);
  color: #fff;
  padding: 0 0.25em;
  line-height: 1.15;
}

p {
  margin: 0 0 1rem;
  text-align: start;
}

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

.nt-mono {
  font-family: var(--nt-font-mono);
}

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

.nt-section-row {
  max-width: calc(var(--nt-measure) + 132px + 2rem);   /* column + clause rail + gap */
  margin-inline: auto;
}
.nt-section-row h1,
.nt-section-row h2,
.nt-section-row .nt-article-lede {
  max-width: min(var(--nt-measure), 100%);
}
@media (max-width: 400px) {
  .nt-section-row {
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  :root {
    --nt-gutter: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.nt-header {
  border-bottom: var(--nt-border-w-heavy) solid var(--nt-ink);
  position: sticky;
  top: 0;
  background: var(--nt-paper);
  z-index: 50;
}

.nt-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 5rem;
}

.nt-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nt-brand__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.nt-brand__wordmark {
  font-family: var(--nt-font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nt-brand__ref {
  font-family: var(--nt-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-top: 0.15rem;
}

.nt-nav {
  display: none;
  align-items: center;
  height: 100%;
  font-family: var(--nt-font-mono);
  font-size: 0.875rem;
  font-weight: 700;
}
@media (min-width: 1440px) {
  .nt-nav {
    display: flex;
  }
}

.nt-nav-toggle {
  display: none;
}

@media (min-width: 1440px) {
  .nt-nav-toggle-wrap {
    display: none;
  }
}

.nt-nav-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.nt-nav-toggle-btn::-webkit-details-marker {
  display: none;
}

.nt-nav-toggle-wrap .nt-faq-diamond {
  width: 14px;
  height: 14px;
}

.nt-nav-toggle-wrap[open] .nt-faq-diamond {
  background: var(--nt-hazard);
}

.nt-nav-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--nt-font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--nt-paper);
  border-top: 1px solid var(--nt-ink);
  border-bottom: var(--nt-border-w-heavy) solid var(--nt-ink);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
@media (min-width: 1440px) {
  .nt-nav-mobile {
    display: none !important;
  }
}
.nt-nav-mobile a {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--nt-border-light);
}
.nt-nav-mobile a:hover, .nt-nav-mobile a:focus-visible {
  background: var(--nt-ink);
  color: #fff;
}

.nt-footer {
  background: var(--nt-ink);
  color: #fff;
  padding-block: 4rem 2rem;
  margin-top: 5rem;
}

.nt-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  border-bottom: 1px solid var(--nt-zinc-800);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .nt-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.nt-footer__brand {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .nt-footer__brand {
    grid-column: span 2;
  }
}

.nt-footer .nt-footer-col-head {
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
  border-bottom: 1px solid var(--nt-zinc-800);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.nt-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
}

.nt-footer li {
  margin-bottom: 1rem;
}

.nt-footer a:hover, .nt-footer a:focus-visible {
  text-decoration: underline;
}

.nt-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--nt-font-mono);
  font-size: 10px;
  font-weight: 700;
  opacity: 0.4;
}
@media (min-width: 768px) {
  .nt-footer__bottom {
    flex-direction: row;
  }
}

.nt-clause-border {
  border-top: var(--nt-border-w-heavy) solid var(--nt-border-heavy);
}

.nt-clause-num {
  font-family: var(--nt-font-mono);
  font-weight: 700;
  font-size: 2.25rem;
  border-bottom: var(--nt-border-w-heavy) solid var(--nt-border-heavy);
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  .nt-clause-num {
    font-size: 1.5rem;
  }
}

.nt-hazard-marker {
  width: 40px;
  height: 40px;
  background: var(--nt-ink);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nt-hazard-marker svg {
  transform: rotate(-45deg);
  color: #fff;
}
.nt-hazard-marker--fill {
  background: var(--nt-hazard);
}

.nt-stamped-box {
  border: var(--nt-border-w) solid var(--nt-ink);
  padding: 1.5rem;
  position: relative;
  min-width: 0;
}

.nt-exhibit {
  border: var(--nt-border-w) solid var(--nt-ink);
  margin: 2.5rem 0;
  width: var(--nt-plate);
  margin-left: calc((var(--nt-measure) - var(--nt-plate)) / 2);
}
.nt-exhibit picture, .nt-exhibit img {
  display: block;
  width: 100%;
  height: auto;
}
.nt-exhibit__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.625rem 1rem;
  border-top: var(--nt-border-w) solid var(--nt-ink);
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nt-exhibit__tag {
  font-weight: 700;
}
.nt-exhibit__alt {
  opacity: 0.7;
  text-align: right;
}

/* ── Hero plate ───────────────────────────────────────────────────────────
   The homepage exhibit carries the head instead of following it: the photo
   is the plate, the H1 and lede are reversed out over it, and the FIG strip
   stays anchored to the bottom edge the way it does on every other exhibit.
   The photo is treated (grayscale, contrast, darkened) and sits under a
   gradient scrim, which keeps white text at ~11:1 over the brightest pixel.
   ───────────────────────────────────────────────────────────────────────── */
.nt-hero-plate {
  position: relative;
  background: var(--nt-ink);
  border-bottom: var(--nt-border-w-heavy) solid var(--nt-ink);
  overflow: hidden;
}

.nt-hero-plate__fig {
  position: absolute;
  inset: 0;
  margin: 0;
}
.nt-hero-plate__fig picture, .nt-hero-plate__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(0.62);
}
.nt-hero-plate__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.86) 100%);
}

.nt-hero-plate__inner {
  position: relative;
  max-width: var(--nt-container-max);
  margin-inline: auto;
  padding: clamp(3rem, 7vh, 5.5rem) var(--nt-gutter) clamp(4rem, 7vh, 5.5rem);
  color: #fff;
}

.nt-hero-plate h1 { color: #fff; }
.nt-hero-plate .nt-article-lede { color: #fff; opacity: 0.92; }
.nt-hero-plate .nt-clause-num {
  color: var(--nt-hazard);
  border-bottom-color: var(--nt-hazard);
}
.nt-hero-plate .nt-head-mark {
  background: var(--nt-hazard);
  color: var(--nt-ink);
}

.nt-hero-plate__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;        /* above the scrim, which is a ::after on the figure */
  border-top: var(--nt-border-w) solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.nt-hero-plate__caption .nt-exhibit__caption {
  max-width: var(--nt-container-max);
  margin-inline: auto;
  padding: 0.625rem var(--nt-gutter);
}
.nt-hero-plate__caption .nt-exhibit__alt { opacity: 0.65; }

.nt-topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--nt-ink);
  border-left: 1px solid var(--nt-ink);
}
@media (min-width: 768px) {
  .nt-topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .nt-topic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nt-topic-card {
  padding: 2rem;
  border-right: 1px solid var(--nt-ink);
  border-bottom: 1px solid var(--nt-ink);
  position: relative;
  transition: background-color 160ms linear;
}
.nt-topic-card:hover {
  background-color: var(--nt-zinc-50);
}
.nt-topic-card__marker {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.nt-topic-card__clause {
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.nt-topic-card__title {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.nt-topic-card__desc {
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 1.5rem;
}

.nt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--nt-ink);
  color: #fff;
  padding: 0.625rem 1rem;
  width: fit-content;
}
.nt-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--nt-hazard);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--nt-reveal-dur) var(--nt-reveal-ease);
}
.nt-btn:hover::after, .nt-btn:focus-visible::after {
  clip-path: inset(0);
}

.nt-nav-link {
  padding-inline: 0.625rem;
  font-size: 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--nt-ink);
  white-space: nowrap;
}
.nt-nav-link:hover, .nt-nav-link:focus-visible {
  background: var(--nt-ink);
  color: #fff;
}

.nt-nav-link--home {
  background: var(--nt-ink);
  color: #fff;
}

.nt-update-row {
  transition: background-color 160ms linear, color 160ms linear;
}
.nt-update-row:hover, .nt-update-row:focus-visible {
  background: var(--nt-ink);
  color: #fff;
}

.nt-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.nt-prose a:hover, .nt-prose a:focus-visible {
  background: var(--nt-ink);
  color: #fff;
  text-decoration: none;
}

.nt-faq-item {
  border-bottom: 1px solid var(--nt-border-light);
  padding-block: 1.25rem;
}

.nt-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
.nt-faq-item summary::-webkit-details-marker {
  display: none;
}
.nt-faq-item summary h3 {
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--nt-font-body);
  font-weight: 700;
}

.nt-faq-diamond {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--nt-ink);
  transform: rotate(45deg);
  transition: background-color 160ms linear;
}

.nt-faq-item[open] .nt-faq-diamond {
  background: var(--nt-hazard);
}

.nt-faq-answer {
  padding-top: 0.75rem;
  max-width: 65ch;
  margin-inline: auto;
}

.nt-steps {
  list-style: none;
  counter-reset: nt-step;
  padding-left: 0;
}
.nt-steps li {
  counter-increment: nt-step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1rem;
  overflow-wrap: break-word;
}
.nt-steps li::before {
  content: counter(nt-step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--nt-ink);
  color: #fff;
  font-family: var(--nt-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-steps li > * {
  display: inline;
}

.nt-prose {
  max-width: calc(var(--nt-measure) + var(--nt-clause-inset));
  margin-inline: auto;
  padding-left: var(--nt-clause-inset);
  box-sizing: border-box;
}
.nt-prose p, .nt-prose ul, .nt-prose ol {
  margin-bottom: 1.25rem;
  text-align: start;
  max-width: var(--nt-measure);
}
.nt-prose h3 {
  font-size: 1.375rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
  max-width: var(--nt-measure);
}
.nt-prose ul, .nt-prose ol {
  padding-left: 1.5rem;
}
.nt-prose li {
  margin-bottom: 0.5rem;
}
.nt-prose strong {
  font-weight: 700;
}

.nt-prose--inline {
  max-width: var(--nt-measure);
  margin-inline: 0;
  padding-left: 0;
  box-sizing: content-box;
}
.nt-prose--inline p, .nt-prose--inline h3 {
  max-width: none;
}

.nt-article-lede {
  font-size: 1.25rem;
  max-width: var(--nt-measure);
  margin-inline: 0;
  text-align: start;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
}

.nt-cite {
  font-family: var(--nt-font-mono);
  font-size: 0.75rem;
  opacity: 0.6;
  display: block;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

/* ── Column, narrow viewports ─────────────────────────────────────────────
   Below the breakout width the column simply fills the gutter, and on phones
   the clause rail stacks above the heading — the rail is narrower there than
   the fixed 164px prose inset, which otherwise left the body text 64px right
   of its own heading (186px column, 27 characters per line). */
@media (max-width: 900px) {
  .nt-section-row,
  .nt-prose:not(.nt-prose--inline) {   /* --inline keeps its own capped measure */
    max-width: none;
  }
  .nt-exhibit {
    width: auto;
    max-width: min(var(--nt-measure), 100%);
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --nt-clause-inset: 0px;
  }
  .nt-section-row {
    display: block !important;
  }
  .nt-clause-num {
    margin-bottom: 0.75rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nt-reveal {
      animation: nt-clip-wipe both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
      animation-duration: 1ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(1) {
      animation-delay: 0ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(2) {
      animation-delay: 40ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(3) {
      animation-delay: 80ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(4) {
      animation-delay: 120ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(5) {
      animation-delay: 160ms;
    }
    .nt-topic-grid .nt-topic-card:nth-child(6) {
      animation-delay: 200ms;
    }
  }
}
@keyframes nt-clip-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}