/* An editorial engineering ledger, using product facts instead of simulated meters. */
.reference {
  background: #e3e9e5;
  color: #14211f;
  border-block: 1px solid #adc0b8;
  scroll-margin-top: 88px;
}
.reference-inner { padding-block: clamp(88px, 9vw, 148px) clamp(82px, 8vw, 128px); }
.reference-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: end;
  margin-bottom: clamp(58px, 7vw, 100px);
}
.reference-heading .chapter-tag { margin-bottom: 29px; color: #375f4d; }
.reference-heading h2 {
  margin: 0;
  font: 500 clamp(67px, 7.6vw, 118px)/.91 var(--sans);
  letter-spacing: -.075em;
}
.reference-heading h2 i {
  color: #356d57;
  font: italic 400 1.05em/.85 var(--serif);
  letter-spacing: -.045em;
  white-space: nowrap;
}
.reference-heading > p {
  max-width: 425px;
  margin: 0 0 4px;
  font: 400 clamp(17px, 1.5vw, 21px)/1.55 var(--sans);
  color: #405b51;
}
.reference-ledger { border-top: 1px solid #849e95; }
.reference-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.12fr) 165px;
  gap: clamp(18px, 2.5vw, 40px);
  align-items: center;
  padding: clamp(29px, 3.8vw, 52px) 4px;
  border-bottom: 1px solid #849e95;
}
.reference-index {
  align-self: start;
  color: #4a7060;
  font: 600 12px/1.5 var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.reference-row h3 {
  margin: 0;
  font: 400 clamp(33px, 3.5vw, 54px)/1.03 var(--serif);
  letter-spacing: -.025em;
}
.reference-row > p {
  max-width: 490px;
  margin: 0;
  color: #40574e;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.63;
}
.reference-mark {
  display: flex;
  flex-direction: column;
  justify-self: end;
  min-width: 125px;
  color: #1d5440;
  font: 500 clamp(47px, 4.4vw, 70px)/.88 var(--sans);
  letter-spacing: -.085em;
  text-align: right;
}
.reference-mark small {
  margin-top: 15px;
  color: #557566;
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .04em;
}
.reference-source {
  display: grid;
  grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  padding-top: 38px;
}
.reference-source > span {
  color: #4a7060;
  font: 600 12px/1.5 var(--mono);
  letter-spacing: .04em;
}
.reference-source p {
  max-width: 850px;
  margin: 0;
  color: #40574e;
  font-size: 16px;
  line-height: 1.7;
}
.desktop-nav { gap: clamp(13px, 1.55vw, 25px); }
.hero-footer > span { line-height: 1.4; }
.site-footer > div:last-child { flex-wrap: wrap; row-gap: 12px; }

/* The native capture is the hero object; lift its fine controls off the black mat. */
.hero-stage[data-hero-mode='aeon'] .hero-aeon-art img {
  filter: brightness(1.2) contrast(1.08) saturate(1.08) drop-shadow(0 36px 55px rgba(0, 0, 0, .34));
  transition: transform 480ms cubic-bezier(.22, .75, .2, 1), filter 480ms ease;
}
.hero-stage[data-hero-mode='aeon'] .hero-aeon-art img:hover { transform: scale(1.018); }

/* Small annotations carry real product information and must remain legible. */
.reference-index, .reference-source > span { color: #2f5b49; }
.reference-mark small { color: #3f6252; }
.studio-frame-top, .studio-frame-bottom { color: #bed1d2; }

@media (max-width: 1080px) {
  .reference-heading { grid-template-columns: 1fr; gap: 30px; }
  .reference-heading > p { max-width: 660px; }
  .reference-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 23px 34px; }
  .reference-index { grid-column: 1; grid-row: 1; }
  .reference-mark { grid-column: 2; grid-row: 1; }
  .reference-row h3 { grid-column: 1; grid-row: 2; }
  .reference-row > p { grid-column: 2; grid-row: 2; }
}
@media (max-width: 680px) {
  .hero-bottom { margin-inline: -20px; }
  .hero-stage { border-inline: 0; }
  .hero-scene-aeon { background: radial-gradient(ellipse at 50% 46%, #142a34 0%, #081318 68%); }
  .hero-stage[data-hero-mode='aeon'] .hero-aeon-art img {
    mix-blend-mode: screen;
    filter: brightness(1.23) contrast(1.1) saturate(1.08);
  }
  .reference { scroll-margin-top: 68px; }
  .reference-inner { padding-block: 78px 72px; }
  .reference-heading { margin-bottom: 45px; gap: 25px; }
  .reference-heading .chapter-tag { margin-bottom: 23px; }
  .reference-heading h2 { font-size: clamp(53px, 12vw, 78px); }
  .reference-heading h2 i { white-space: normal; }
  .reference-heading > p { font-size: 17px; }
  .reference-row { grid-template-columns: 1fr auto; gap: 21px 12px; padding: 34px 0 38px; }
  .reference-index { grid-column: 1; grid-row: 1; font-size: 11px; }
  .reference-mark { grid-column: 2; grid-row: 1; min-width: 0; font-size: 42px; }
  .reference-mark small { font-size: 9px; margin-top: 8px; }
  .reference-row h3 { grid-column: 1/-1; grid-row: 2; font-size: clamp(38px, 10vw, 51px); }
  .reference-row > p { grid-column: 1/-1; grid-row: 3; font-size: 16px; }
  .reference-source { grid-template-columns: 1fr; gap: 17px; padding-top: 31px; }
  .reference-source p { font-size: 15px; }
  .hero-footer > span { min-height: 49px; font-size: 10px; }
  .site-footer > div:last-child { column-gap: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage[data-hero-mode='aeon'] .hero-aeon-art img { transition: none; }
  .hero-stage[data-hero-mode='aeon'] .hero-aeon-art img:hover { transform: none; }
}

/* A routing drawing gives each signal stage its own legible technical study. */
.signal-intro h2 i { font: 500 1em/1.02 var(--sans); letter-spacing: -.055em; color: #247380; }
.route-plates { display: grid; align-items: center; flex: 1; min-height: 190px; }
.route-plate { min-width: 0; }
.route-plate[hidden] { display: none; }
.route-file-flow { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); align-items: center; }
.route-cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-width: 0; min-height: 125px; padding: 13px;
  border: 1px solid #40636a; background: #102329;
}
.route-cell span, .route-cell small, .route-output-head span, .route-lane span, .route-lane small { font: 600 11px/1.3 var(--mono); letter-spacing: .025em; }
.route-cell span, .route-lane span, .route-output-head span { color: #86abb0; }
.route-cell strong { font: 500 clamp(24px, 2.5vw, 36px)/1 var(--sans); letter-spacing: -.05em; color: #e6eeea; }
.route-cell small, .route-lane small { color: #91b0b2; }
.route-cell-accent { border-color: #a2d978; background: #193327; }
.route-cell-accent strong { color: #b7ed83; }
.route-wire { position: relative; height: 1px; background: #62848a; }
.route-wire::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; background: #b7ed83; border-radius: 50%; }
.route-plate-note { margin: 15px 0 0; color: #9cb8b9; font: 600 11px/1.5 var(--mono); letter-spacing: .02em; }
.route-lanes { display: grid; gap: 10px; }
.route-lane { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 5px 15px; min-height: 73px; padding: 11px 16px; border: 1px solid #40636a; background: #102329; }
.route-lane strong { grid-column: 1; color: #e6eeea; font: 500 clamp(20px, 2.1vw, 30px)/1 var(--sans); letter-spacing: -.05em; }
.route-lane small { grid-column: 2; grid-row: 2; text-align: right; }
.route-lane-accent { border-color: #a2d978; background: #193327; }
.route-lane-accent strong { color: #b7ed83; }
.route-output-head { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid #40636a; }
.route-output-head strong { color: #dce9e5; font: 500 16px/1.25 var(--sans); }
.route-channel-map { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.route-channel-map span, .route-channel-map i { display: grid; place-items: center; min-height: 32px; border: 1px solid #4b7276; background: #12272c; color: #c7dfdf; font: 600 11px/1 var(--mono); font-style: normal; }
.route-channel-map i { border-color: #41604e; background: #193327; color: #b7ed83; font-size: 10px; }

/* The conclusion reads as a colophon, rather than a full-screen neon advertisement. */
.closing { background: #e4e9df; color: #12251e; border-top: 5px solid #a2d978; }
.closing .chapter-tag.dark { color: #315b45; }
.closing .tag-square { background: #315b45; }
.closing h2 { color: #12251e; }
.closing h2 i { color: #386951; }
.closing-bottom { border-color: #91a99a; }
.closing-bottom p { color: #365548; }
.closing-link { background: #142d24; border-color: #142d24; color: #eef4e9; transition: background .25s ease, color .25s ease, transform .25s ease; }
.closing-link:hover { background: #b7ed83; border-color: #142d24; color: #142d24; transform: translateY(-2px); }
.closing-ghost { color: rgba(31, 78, 52, .055); }

@media (max-width: 680px) {
  .route-plates { min-height: 160px; }
  .route-file-flow { grid-template-columns: minmax(0,1fr); }
  .route-cell { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; min-height: 63px; padding: 9px 12px; gap: 5px 10px; }
  .route-cell span { grid-column: 1; grid-row: 1; }
  .route-cell strong { grid-column: 1; grid-row: 2; }
  .route-cell small { grid-column: 2; grid-row: 2; text-align: right; }
  .route-cell span, .route-cell small, .route-lane span, .route-lane small, .route-output-head span { font-size: 10px; }
  .route-cell strong { font-size: 24px; }
  .route-wire { width: 1px; height: 15px; justify-self: center; }
  .route-wire::after { width: 5px; height: 5px; right: -2px; top: auto; bottom: 0; }
  .route-plate-note { font-size: 10px; }
  .route-lane { padding: 10px; gap: 4px 8px; }
  .route-lane strong { font-size: 20px; }
  .route-output-head strong { font-size: 13px; }
  .closing-link { width: 100%; max-width: none; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-link { transition: none; }
  .closing-link:hover { transform: none; }
}