/* Original, dependency-free styling. One readable scroll reveal system. */
:root {
  color-scheme: dark;
  --ground: #0b0b0b;
  --ink: #e5e5e5;
  --body: #b5b5b5;
  --machine: #929292;
  --rule: #303030;
  --gutter: clamp(1.5rem, 5.55vw, 6rem);
  --copy-space: clamp(2rem, 3vw, 2.5rem);
  --annotation-gap: 1.25rem;
  --movement-gap: clamp(7rem, 12vw, 11rem);
  --field-entry: clamp(6rem, 14svh, 9rem);
  --section-inset: 1.5rem;
  --mark-offset: -1.5rem;
  --registration-height: 2.25rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Times, serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; }
p, h1, h2, h3, dl, dd, ul { margin: 0; }
::selection { color: var(--ground); background: var(--ink); }

.skip-link {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: var(--gutter);
  transform: translateY(-200%);
  padding: .8rem 1rem;
  background: var(--ink);
  color: var(--ground);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
main:focus { outline: none; }

.masthead, .footer {
  max-width: 1728px;
  margin: 0 auto;
  color: var(--machine);
  font: .6875rem/1.5 var(--mono);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.masthead { padding: 2.6rem var(--gutter) 0; }
.footer { margin-top: var(--movement-gap); padding: 0 var(--gutter) 2.6rem; text-align: right; }

main { max-width: 1728px; margin-inline: auto; }
.opening { position: relative; padding-inline: var(--gutter); padding-top: clamp(7rem, 16svh, 12rem); }
.opening-title { margin-left: -.075em; }
h1 {
  font-size: clamp(4rem, 14.25vw, 15.4rem);
  font-weight: 400;
  line-height: .89;
  letter-spacing: -.074em;
  text-transform: uppercase;
}
.wordmark-line { position: relative; display: inline-block; }
.trademark {
  position: absolute;
  top: .15em;
  left: 100%;
  margin-left: .35em;
  color: var(--body);
  font-size: clamp(.6875rem, 1.25vw, 1.375rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.opening-thesis {
  margin: clamp(3rem, 7svh, 5rem) 0 0 55%;
  font-size: clamp(1.2rem, 1.75vw, 1.875rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.dimension-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 1rem clamp(2rem, 5.55vw, 6rem);
  padding-block: 1.6rem;
  margin-top: clamp(5rem, 14svh, 10rem);
  border-top: 1px solid var(--rule);
}
.dimensions {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  font: .75rem/1.6 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  gap: .6rem 1.6rem;
}

.continuous-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--movement-gap);
  padding-top: var(--field-entry);
}
/* Each mark belongs to its heading; one content anchor on every viewport. */
.passage {
  padding-inline: calc(var(--gutter) + var(--section-inset)) var(--gutter);
}
.human-layer { position: relative; max-width: 48rem; }
.human-layer::before {
  content: "";
  position: absolute;
  top: .4rem;
  left: var(--mark-offset);
  width: 1px;
  height: var(--registration-height);
  background: #222;
  pointer-events: none;
}
h2 {
  font-size: clamp(3.5rem, 6.65vw, 7.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.055em;
}
em {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
}
.body-copy {
  max-width: 34rem;
  margin-top: var(--copy-space);
  color: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: -.01em;
}
.machine-layer {
  position: relative;
  max-width: 32rem;
  margin-top: var(--copy-space);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--body);
  font: .8125rem/1.6 var(--mono);
}
.machine-layer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2rem;
  height: 1px;
  background: var(--machine);
}
.layer-label {
  margin-bottom: var(--annotation-gap);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.machine-layer dl { display: grid; gap: .75rem; }
.machine-layer dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }
.machine-layer dt { color: var(--ink); }

.mobile-break { display: none; }

/* Native, scroll-linked movement. Content is readable at every position.
   Definitions rise together beneath a fixed rule and label, without row stagger.
   Unsupported browsers and reduced-motion preferences use the static base. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .human-layer {
      --reveal-travel: 12px;
      --reveal-opacity: .9;
      animation: reading-plane linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .machine-layer { view-timeline-name: --structure; view-timeline-axis: block; }
    .machine-layer dl {
      --reveal-travel: 48px;
      --reveal-opacity: .68;
      animation: reading-plane linear both;
      animation-timeline: --structure;
      animation-range: entry 0% entry calc(100% + 6rem);
    }
    @keyframes reading-plane {
      from { transform: translateY(var(--reveal-travel)); opacity: var(--reveal-opacity); }
      to { transform: translateY(0); opacity: 1; }
    }
  }
}

@media (min-width: 1729px) {
  :root { --gutter: 6rem; }
}

@media (max-width: 760px) {
  :root {
    --copy-space: 2rem;
    --movement-gap: 6rem;
    --field-entry: 6rem;
  }
  .masthead, .footer { letter-spacing: .04em; }
  .masthead { padding-top: 1.75rem; }
  .footer { padding-bottom: 1.75rem; }
  .opening { padding-top: clamp(7rem, 18svh, 10rem); }
  h1 { font-size: clamp(3.5rem, 15vw, 7.125rem); line-height: .95; letter-spacing: -.075em; }
  .opening-thesis { width: max-content; max-width: 100%; margin: 3rem 0 0 auto; font-size: 1.25rem; line-height: 1.4; }
  .dimension-field { margin-top: clamp(6rem, 19svh, 10rem); display: block; padding-block: 1.4rem; }
  .dimensions { font-size: .75rem; letter-spacing: 0; gap: .75rem; }
  h2 { font-size: clamp(2.875rem, 9.7vw, 4.6rem); line-height: 1.05; letter-spacing: -.055em; }
  .body-copy { margin-top: var(--copy-space); font-size: 1rem; line-height: 1.7; max-width: 25rem; }
  .wide-break { display: none; }
  .mobile-break { display: inline; }
  .machine-layer {
    max-width: 25rem;
    margin-top: var(--copy-space);
  }
  .machine-layer dl > div { grid-template-columns: 7rem 1fr; gap: .75rem; }
}

@media (max-width: 374px) {
  :root { --gutter: 1.25rem; --section-inset: 0rem; --mark-offset: -.625rem; }
  .machine-layer dl > div { grid-template-columns: 1fr; gap: .125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .human-layer, .machine-layer dl { animation: none !important; }
  .passage { break-inside: avoid; }
}