/* Yasal Bilgiler - denetim alani.
   Yon kaynagi: docs/research/legal-directions/02-continuous-statute-control-
   plane.png. Operator secimi, 2026-07-30.

   The whole page is one idea: a graphite control field is the ground, and every
   word of statutory prose sits on a single paper sheet inside it. Legal text is
   never set on graphite. Every colour below is either a token from style.css or
   a documented tint of one - no new palette enters the site here. */

/* The plane starts at the top of the document, not below the bar. The header
   paints its own graphite ground here (data-nav-surface), so a plane that began
   under it only ever produced a band of nothing between the bar and the first
   rule. The masthead reserves the bar's height in its own padding instead. */
.legal-plane {
  position: relative;
  background: var(--graphite);
  color: var(--paper);
  padding: 0 0 128px;
}

/* The quiet dot fields the direction puts in the dark margins. Decoration with
   a job: they establish that the graphite is a surface rather than an empty
   background, at a density low enough that it never competes with the sheet.

   The clip lives here rather than on .legal-plane. An `overflow` other than
   `visible` on an ancestor silently kills `position: sticky` inside it, and this
   page has three sticky elements: the lane strip, the record index, and the
   rail. */
.legal-plane__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.legal-plane__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: screen;
}

.legal-plane__dots {
  position: absolute;
  width: 172px;
  height: 118px;
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.22) 1px,
    transparent 1px
  );
  background-size: 13px 13px;
}

.legal-plane__dots--bottom {
  bottom: 96px;
  left: 40px;
}

@media (max-width: 1180px) {
  .legal-plane__dots {
    display: none;
  }
}

/* ---------- Masthead ---------- */

/* One measure for the whole page. The masthead, the lane strip and every record
   are laid on these three columns, so the page label, the sheet and the section
   index keep the same three left edges from the title down to the last
   certificate. */
.legal-plane {
  /* The sheet keeps the width its reading measure was tuned to; the index
     column takes the slack, so the registry, the rail and the lane strip all
     end on the same right edge instead of leaving 88px of nothing there. */
  --legal-columns: 148px minmax(0, 760px) minmax(268px, 1fr);
  --legal-gap: 40px;
  --legal-gutter: 48px;
}

.legal-masthead {
  position: relative;
  display: grid;
  grid-template-columns: var(--legal-columns);
  gap: 0 var(--legal-gap);
  align-items: end;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--header-height) + 56px) var(--legal-gutter) 44px;
  isolation: isolate;
}

.record__rail-title,
.record-lanes__hint {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-invert);
}

/* The title takes the margin edge and the lede takes the sheet edge, which are
   the two edges every record below repeats. The masthead therefore states the
   page's measure before the first sheet arrives on it. */
.legal-masthead__copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / 3;
}

.legal-masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 6.4vw, 6.4rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--paper-bright);
}

.legal-masthead__lede {
  max-width: 46ch;
  margin: 26px 0 0 calc(148px + var(--legal-gap));
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--paper);
}

/* ---------- Registry ---------- */

/* The registry panel. It carries what a statutory masthead is actually for -
   who publishes these records, under whose authorisation, from what address -
   and it is the page's only piece of chrome that is a record itself. It sits on
   the section index's column, so it hands its left edge to the rail below.

   It carries no heading of its own. Three labelled values on a ruled column
   already say what they are, and a word over them only names the furniture. */
.legal-registry {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 0 16px 24px;
  border-left: 1px solid var(--graphite-line);
  isolation: isolate;
  overflow: hidden;
}

.legal-registry__list {
  position: relative;
  z-index: 2;
  margin: 0;
}

.legal-registry__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid var(--graphite-line);
}

.legal-registry__row dt {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-invert);
}

.legal-registry__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--paper-bright);
}

/* The blind emboss is this panel's surface now. It is behind a registry rather
   than behind a title, which is the one place a texture cannot compete with
   anything that has to be read. */
/* The blind-emboss plate that used to fill this block is gone from the page.
   It was a picture behind a title, which is the one opening every other page on
   this site refuses, and the registry now carries the block. The asset stays in
   `assets/img/legal/` as the record of that round. */

/* ---------- Lane strip ---------- */

/* One lane per record. The travelling orange block is a single element that
   moves; no lane owns a background of its own, so there can never be two
   active lanes on screen at once. */
/* The wrapper is what sticks and what carries the fades and the hint. The
   scroller itself cannot: a child of a scroller travels with its content, so an
   edge fade placed inside would scroll away from the edge it marks. */
/* The strip is the masthead's foot: it sits directly on the masthead's own
   bottom edge with nothing between them, and on the same gutter, so the four
   lanes measure the content rather than the window. */
.record-lanes-wrap {
  position: sticky;
  top: var(--header-height);
  z-index: 4;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--legal-gutter);
}

/* `relative` is load-bearing twice over. It makes the scroller the containing
   block for the travelling block, so the block is clipped by the scroller and
   travels with its content - which is what `placeLive` assumes when it uses
   `offsetLeft` raw. Without it the block hangs off the sticky wrapper instead,
   escapes the clip, and stretches the document 577px wider than a phone. */
.record-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--graphite-line);
  border-bottom: 1px solid var(--graphite-line);
  background: var(--graphite-deep);
  isolation: isolate;
}

/* Shown only on the side that still has strip behind it, and only while the
   strip actually overflows. Both are set from the scroller's own offset. */
.record-lanes__edge {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 42px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.record-lanes__edge--start {
  left: 0;
  background: linear-gradient(to right, rgba(26, 21, 16, 0.92), transparent);
}

.record-lanes__edge--end {
  right: 0;
  background: linear-gradient(to left, rgba(26, 21, 16, 0.92), transparent);
}

.record-lanes-wrap.has-start .record-lanes__edge--start,
.record-lanes-wrap.has-end .record-lanes__edge--end {
  opacity: 1;
}

/* The hint says the one thing the strip cannot say for itself. It appears only
   when the strip overflows, and it retires for good the first time the reader
   scrolls it, because a hint that stays is furniture. */
.record-lanes__hint {
  position: absolute;
  right: 20px;
  top: -26px;
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  color: var(--signal-orange-invert);
  pointer-events: none;
}

.record-lanes-wrap.is-scrollable .record-lanes__hint {
  display: flex;
}

.record-lanes-wrap.hint-retired .record-lanes__hint {
  display: none;
}

.record-lanes__hint svg {
  width: 20px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: lane-hint 1.9s ease-in-out infinite;
}

@keyframes lane-hint {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

.record-lanes__live {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 25%;
  height: 100%;
  background: var(--signal-orange);
  transform: translateX(0);
}

.record-lanes__lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 24px 20px;
  border-right: 1px solid var(--graphite-line);
  text-decoration: none;
  color: var(--paper);
  transition:
    color 0.24s ease,
    background-color 0.24s ease;
}

.record-lanes__lane:first-child {
  border-left: 1px solid var(--graphite-line);
}

.record-lanes__lane:last-child {
  border-right: 0;
}

.record-lanes__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.record-lanes__lane:hover,
.record-lanes__lane:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper-bright);
}

/* The active lane states itself twice: ink weight and position of the orange
   block. Colour is never the only signal. */
.record-lanes__lane[aria-current="true"] {
  color: var(--ink);
  background: transparent;
}

.record-lanes__lane[aria-current="true"] .record-lanes__name {
  font-weight: 600;
}


/* ---------- Stage ---------- */

.legal-stage {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--legal-gutter);
}

.record {
  display: grid;
  grid-template-columns: var(--legal-columns);
  gap: 0 var(--legal-gap);
  align-items: start;
  padding: 88px 0 0;
  scroll-margin-top: calc(var(--header-height) + 88px);
}

.record:last-child {
  padding-bottom: 24px;
}

.record--short .record__sheet {
  min-height: 330px;
}

/* Left margin: the record's role on the graphite. */
.record__margin {
  position: sticky;
  top: calc(var(--header-height) + 120px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}

.record__margin-rule {
  width: 40px;
  height: 1px;
  background: var(--graphite-line);
}

.record__margin-note {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-invert);
}

/* ---------- The paper sheet ---------- */

.record__sheet {
  position: relative;
  background: var(--paper-bright);
  color: var(--ink);
  padding: 56px 64px 64px;
}

.record__head {
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.record__head h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

/* Every sub-section is a real cut in the sheet's left edge, drawn from the
   heading that exists in the text rather than from a decorative count. The
   notch is graphite laid over the paper, so it reads as material removed.

   It is an element rather than a pseudo-element because it is the signature of
   this direction and it has to be cut rather than appear: GSAP cannot tween a
   pseudo-element. */
.record__block {
  position: relative;
}

.record__block + .record__block {
  margin-top: 52px;
}

.record__cut {
  position: absolute;
  top: 0;
  left: -64px;
  width: 26px;
  height: 44px;
  background: var(--graphite);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: left center;
}

.record__cut::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- The prose itself ---------- */

/* This block is the whole point of the design. 18px over 30px at a 60 to 70
   character measure is the contract these three values answer to: a direction
   that turned statutory prose into texture was a failed direction. */
.record__block h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}

.record__block p,
.record__block li {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  color: #3c2c25;
}

.record__block p {
  max-width: 66ch;
  margin: 0 0 20px;
}

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

.record__block a {
  color: var(--orange-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.record__block ul,
.record__block ol {
  max-width: 66ch;
  margin: 0 0 20px;
  padding-left: 22px;
}

.record__block li {
  margin-bottom: 12px;
}

.record__block ul ul {
  margin: 12px 0 0;
}

/* The source's own list items already begin with a bullet character, so the
   marker is suppressed rather than doubled. */
.record__block ul {
  list-style: none;
  padding-left: 0;
}

.record__block ul ul {
  padding-left: 22px;
}

/* ---------- Right rail ---------- */

.record__rail {
  position: sticky;
  top: calc(var(--header-height) + 120px);
  padding-top: 6px;
}

.record__rail-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--graphite-line);
}

.record__rail-list,
.record__rail-facts {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One location signal for the whole rail, as the direction has it: an orange
   rule that arrives from the left at the sub-section the reader has reached.
   Eight ticks that each light up on their own would be eight signals. */
.record__rail-signal {
  position: absolute;
  left: -14px;
  top: 0;
  width: 26px;
  height: 1.6px;
  background: var(--signal-orange-invert);
  opacity: 0;
}

.record__rail-list li,
.record__rail-facts li {
  border-bottom: 1px solid var(--graphite-line);
}

.record__rail-list a,
.record__rail-facts a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--muted-invert);
  text-decoration: none;
  transition: color 0.22s ease;
}

.record__rail-facts li:not(:has(a)) {
  padding: 12px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-invert);
}

.record__rail-list a:hover,
.record__rail-list a:focus-visible,
.record__rail-facts a:hover,
.record__rail-facts a:focus-visible {
  color: var(--paper-bright);
}

/* The ticks stay quiet and stay put. Only the signal moves, and the active
   entry states itself with ink weight too, so colour is never the only cue. */
.record__rail-list i {
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  background: var(--graphite-line);
  transition: width 0.28s ease;
}

.record__rail-list a[aria-current="true"] {
  color: var(--paper-bright);
  font-weight: 600;
}

.record__rail-list a[aria-current="true"] i {
  width: 28px;
}

/* ---------- Certificates ---------- */

.certificates {
  position: relative;
  padding-bottom: 10vh;
}

.certificate {
  position: relative;
  margin: 0 0 34px;
  scroll-margin-top: calc(var(--header-height) + 126px);
}

@media (min-width: 1081px) {
  .legal-js .certificate {
    position: sticky;
    top: calc(var(--header-height) + 92px);
    margin-bottom: 30vh;
  }

  .legal-js .certificate:nth-child(1) {
    z-index: 1;
  }

  .legal-js .certificate:nth-child(2) {
    z-index: 2;
  }

  .legal-js .certificate:nth-child(3) {
    z-index: 3;
  }

  .legal-js .certificate:nth-child(4) {
    z-index: 4;
  }

  .legal-js .certificate:nth-child(5) {
    z-index: 5;
  }

  .legal-js .certificate:nth-child(6) {
    z-index: 6;
  }

  .legal-js .certificate:nth-child(7) {
    z-index: 7;
    margin-bottom: 0;
  }
}

.certificate__surface {
  display: flex;
  flex-direction: column;
  min-height: min(74vh, 760px);
  border: 1px solid var(--line-strong);
  background: var(--paper-bright);
  box-shadow: 0 28px 64px color-mix(in srgb, var(--graphite-deep) 28%, transparent);
  transform-origin: center top;
  isolation: isolate;
}

.certificate__link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(24px, 4vw, 52px);
  background: var(--paper);
  overflow: hidden;
}

.certificate__link picture {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.certificate__link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(62vh, 650px);
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--graphite-deep) 16%, transparent);
}

.certificate__open {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 11px 14px;
  border: 1px solid var(--graphite-line);
  background: var(--graphite-deep);
  color: var(--paper-bright);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background-color 0.24s ease,
    color 0.24s ease;
}

.certificate__link:hover .certificate__open,
.certificate__link:focus-visible .certificate__open {
  background: var(--signal-orange);
  color: var(--ink);
}

.certificate__link:focus-visible {
  outline: 2px solid var(--signal-orange);
  outline-offset: -2px;
}

.certificate figcaption {
  position: relative;
  order: -1;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 15px 22px 15px 54px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--ink);
}

.certificate figcaption::before {
  content: "";
  position: absolute;
  left: 22px;
  width: 16px;
  height: 2px;
  background: var(--line-strong);
  transform-origin: left center;
  transition:
    width 0.28s ease,
    background-color 0.28s ease;
}

.certificate.is-current figcaption::before {
  width: 24px;
  background: var(--signal-orange);
}

.record__rail-facts a[aria-current="true"] {
  color: var(--paper-bright);
  font-weight: 600;
}

[data-certificate-nav] a {
  padding-left: 14px;
}

/* Said once, above the set, instead of seven times under it. Set as a caption
   rather than as one of the page's uppercase micro labels: two lines of tracked
   capitals shout louder than the certificates they introduce. */
.record__note {
  margin: 0 0 32px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- Compact ---------- */

@media (max-width: 1080px) {
  .legal-plane {
    --legal-gutter: 20px;

    padding: 0 0 88px;
  }

  /* One column, and the registry keeps its job: it follows the lede as the
     page's first record rather than becoming a caption under a picture. */
  .legal-masthead {
    display: block;
    padding: calc(var(--header-height) + 44px) var(--legal-gutter) 30px;
  }

  .legal-masthead__copy {
    width: 100%;
  }

  .legal-masthead h1 {
    font-size: clamp(3.4rem, 14vw, 5.2rem);
  }

  /* One column down here, so the lede takes the title's own edge back. */
  .legal-masthead__lede {
    margin: 22px 0 0;
    font-size: 16px;
  }

  /* The rows carry their own rules, so the panel adds none of its own down
     here: a panel rule 20px above the first row's rule reads as one line drawn
     twice. */
  .legal-registry {
    margin-top: 30px;
    padding: 0;
    border-left: 0;
  }

  .legal-registry__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  /* The address is the long value, so it takes the full width instead of
     leaving a half-empty cell beside it. */
  .legal-registry__row:last-child {
    grid-column: 1 / -1;
  }

  /* Full bleed down here: the strip is a sideways scroller, and a gutter on a
     scroller only hides the fact that there is more of it behind the edge. */
  .record-lanes-wrap {
    padding: 0;
  }

  .record-lanes__lane:first-child {
    border-left: 0;
  }

  /* The four lanes become one sideways strip rather than four cramped columns.
     Each lane is a snap target, and the last one carries scroll padding so the
     strip can come to rest with it fully on screen. */
  .record-lanes {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .record-lanes::-webkit-scrollbar {
    display: none;
  }

  .record-lanes__lane {
    flex: 0 0 auto;
    width: 62%;
    min-width: 176px;
    max-width: 260px;
    padding: 14px 18px 15px;
    scroll-snap-align: start;
  }

  .record-lanes__name {
    font-size: 14px;
  }

  .record {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 44px;
    scroll-margin-top: calc(var(--header-height) + 64px);
  }

  .record--short .record__sheet {
    min-height: 0;
  }

  /* Order matters more than position down here. The record's own label comes
     first, then its section index, then the prose. The index used to sit after
     the sheet, which for the long record buried an eight-entry jump list under
     1500 words of statute - present, and useless. */
  .record__margin {
    position: static;
    order: 1;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
  }

  /* The note leads and the rule runs out to the right of it. With the rule
     first the label was pushed to the right edge and read as a stray. */
  .record__margin-note {
    order: 1;
  }

  .record__margin-rule {
    order: 2;
    flex: 1 1 auto;
    width: auto;
  }

  .record__rail {
    position: static;
    order: 2;
    padding: 0 0 22px;
  }

  .record__rail-title {
    padding-bottom: 10px;
  }

  /* Two columns. In one column the eight-entry jump list stood between the
     reader and the text for the better part of a screen. */
  .record__rail-list,
  .record__rail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .record__sheet {
    order: 3;
    padding: 30px 22px 38px;
  }

  .record__block::before,
  .record__block::after,
  .record__cut {
    display: none;
  }

  .record__block + .record__block {
    margin-top: 40px;
  }

  /* The travelling signal is a desktop instrument. Down here the rail is a
     plain jump list above the text, and a marker floating over a list the
     reader has already scrolled past says nothing. */
  .record__rail-signal {
    display: none;
  }

  .record__rail-list a,
  .record__rail-facts a {
    padding: 10px 0;
  }

  /* The tick is a desktop instrument that pairs with the travelling signal.
     Without the signal it is just an indent. */
  .record__rail-list i {
    display: none;
  }

  .certificates {
    padding-bottom: 0;
  }

  .certificate {
    position: relative;
    top: auto;
    margin-bottom: 22px;
  }

  .certificate__surface {
    min-height: 0;
    box-shadow: none;
  }

  .certificate__link {
    min-height: 0;
    padding: 18px;
  }

  .certificate__link img {
    width: 100%;
    height: auto;
    max-height: none;
    box-shadow: none;
  }

  .certificate__link picture {
    width: 100%;
    max-height: none;
  }

  .certificate figcaption {
    min-height: 52px;
    padding: 13px 16px 13px 44px;
    font-size: 11px;
  }

  .certificate figcaption::before {
    left: 16px;
  }

  .certificate__open {
    right: 12px;
    bottom: 12px;
    padding: 9px 10px;
  }
}

/* ---------- Reduced motion ---------- */

/* Nothing is withheld: every sheet, cut, rail mark, and certificate renders in
   its finished state. Only the travel is removed. */
@media (prefers-reduced-motion: reduce) {
  .record-lanes__live,
  .record-lanes__lane,
  .record-lanes__edge,
  .record__rail-list a,
  .record__rail-list i,
  .certificate__open,
  .certificate figcaption::before {
    transition: none;
  }

  .legal-js .certificate {
    position: relative;
    top: auto;
    margin-bottom: 24px;
  }

  .certificate__surface {
    transform: none !important;
  }

  /* The hint still shows and still says the same thing; it just stops
     travelling. */
  .record-lanes__hint svg {
    animation: none;
  }
}