/*
 * Upper proof zone: preparation window + full-width Project corridor.
 * Loaded after styles.css so these components can override the legacy dossier.
 */

/* Preparation window -------------------------------------------------- */

.timing-window {
  position: relative;
  z-index: 2;
  margin-top: 0;
  overflow: clip;
  color: var(--ink);
  background: #fbfaf6;
  border: 1px solid rgba(199, 190, 167, 0.9);
  box-shadow: 0 30px 80px rgba(26, 54, 54, 0.07);
  isolation: isolate;
}

.timing-window::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(181, 138, 42, 0.075), transparent 24%),
    linear-gradient(90deg, transparent 0 27%, rgba(199, 190, 167, 0.24) 27%, transparent calc(27% + 1px));
  pointer-events: none;
  content: "";
}

.timing-window::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0 8%, rgba(181, 138, 42, 0.12) 8%);
  content: "";
}

.timing-window-head {
  display: grid;
  min-height: 212px;
  padding: clamp(38px, 4vw, 58px) clamp(30px, 4.5vw, 58px) 38px;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(44px, 8vw, 126px);
}

.timing-badge {
  display: inline-flex;
  width: max-content;
  min-height: 29px;
  padding: 5px 11px 5px 9px;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(48, 75, 70, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.timing-badge span {
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(181, 138, 42, 0.1);
}

.timing-window-head h3 {
  max-width: 830px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.047em;
  line-height: 0.99;
  text-wrap: balance;
}

.timing-window-head p {
  margin-top: 17px;
  color: var(--muted);
  font-size: 16px;
}

.timing-plot {
  position: relative;
  height: 258px;
  margin: 0 clamp(30px, 4.5vw, 58px);
  overflow: clip;
  background: rgba(255, 255, 255, 0.42);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.timing-plot::before {
  position: absolute;
  z-index: 1;
  top: 108px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dark), rgba(125, 90, 18, 0.4) 74%, rgba(48, 75, 70, 0.35));
  content: "";
}

.timing-window-band {
  position: absolute;
  z-index: 0;
  top: 28px;
  bottom: 0;
  left: 0;
  width: 75%;
  padding: 18px 20px;
  color: var(--gold-dark);
  background:
    linear-gradient(90deg, rgba(224, 200, 122, 0.34), rgba(224, 200, 122, 0.12) 78%, transparent),
    radial-gradient(circle, rgba(125, 90, 18, 0.24) 0.6px, transparent 0.8px);
  background-size: auto, 15px 15px;
  border-left: 2px solid var(--gold);
  border-right: 1px dashed rgba(125, 90, 18, 0.35);
}

.timing-window-band span,
.timing-window-band strong {
  display: block;
}

.timing-window-band span {
  font-size: 10px;
  font-weight: 500;
}

.timing-window-band strong {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
}

.timing-events {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timing-events li {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 139px clamp(14px, 2vw, 24px) 20px;
  flex-direction: column;
}

.timing-events li::before {
  position: absolute;
  top: 108px;
  bottom: 18px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(125, 90, 18, 0.5), rgba(199, 190, 167, 0.25));
  content: "";
}

.timing-events i {
  position: absolute;
  top: 103px;
  left: -5px;
  width: 11px;
  height: 11px;
  background: #fbfaf6;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(181, 138, 42, 0.08);
}

.timing-events li:first-child::before,
.timing-events li:first-child i {
  left: 18px;
}

.timing-events span {
  color: var(--gold-dark);
  font-family: var(--font-mono);
  font-size: 10px;
}

.timing-events strong {
  margin-top: 5px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.timing-events small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.timing-comparison {
  margin: 34px clamp(30px, 4.5vw, 58px) 0;
}

/* No outer border and no header block above it — the matrix is the whole
   component now, so it carries its own edges cell by cell. */
.timing-matrix {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.52);
}

.timing-matrix-header,
.timing-matrix-row {
  display: grid;
  grid-template-columns: minmax(156px, 0.92fr) repeat(5, minmax(126px, 1fr));
}

.timing-matrix-header {
  color: var(--subtle);
  background: #edf0eb;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

/* The header's horizontal padding has to match the cell it sits above, or the
   column label and the value below it start on two different left edges. The
   first column is wider-padded because .timing-party under it is, and the rest
   match .timing-cell. That mismatch is what read as broken padding. */
.timing-matrix-header > span {
  display: flex;
  min-height: 38px;
  padding: 9px 13px;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
}

.timing-matrix-header > span:first-child {
  padding-left: 18px;
}

.timing-matrix-header > span:last-child {
  border-right: 0;
}

.timing-matrix-header b {
  color: var(--gold-dark);
  font-weight: 500;
}

.timing-matrix-row {
  min-height: 78px;
  border-bottom: 1px solid var(--line-strong);
}

.timing-matrix-row:last-child {
  border-bottom: 0;
}

.timing-party {
  display: flex;
  padding: 13px 18px;
  flex-direction: column;
  justify-content: center;
  color: var(--ink-2);
  background: rgba(250, 249, 244, 0.94);
  border-right: 1px solid var(--line-strong);
  font-weight: 500;
}

.timing-party span {
  font-size: 13px;
}

.timing-party small {
  margin-top: 5px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.timing-cell {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 13px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(199, 190, 167, 0.48);
}

.timing-cell:last-child {
  border-right: 0;
}

.timing-cell::before {
  position: absolute;
  top: 14px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.timing-cell b,
.timing-cell small {
  display: block;
}

.timing-cell b {
  padding-left: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.22;
}

.timing-cell small {
  margin-top: 4px;
  padding-left: 12px;
  font-size: 10px;
  line-height: 1.32;
}

.timing-cell.is-authority {
  color: rgba(242, 237, 223, 0.94);
  background: #173a34;
}

.timing-cell.is-authority::before {
  background: #d6bd6d;
  box-shadow: 0 0 0 4px rgba(214, 189, 109, 0.1);
}

.timing-cell.is-authority small {
  color: rgba(242, 237, 223, 0.57);
}

.timing-cell.is-unavailable {
  color: #7e8c85;
  background: #f4f6f3;
}

.timing-cell.is-intake {
  color: #54645d;
  background: #e3e6e2;
}

.timing-cell.is-unavailable::before {
  background: #c3cac5;
}

.timing-cell.is-unavailable small {
  color: #9aa5a0;
}

.timing-cell.is-intake small {
  color: #7c8881;
}

.timing-cell.is-intake {
  background: #d7ddd8;
  box-shadow: 3px 0 0 #687970 inset;
}

.timing-cell.is-intake::before {
  background: #61756b;
  box-shadow: 0 0 0 4px rgba(97, 117, 107, 0.1);
}

.timing-matrix-allodial .timing-party {
  color: #60470f;
  background: #f3ead0;
}

.timing-cell.is-allodial {
  color: #49360c;
  background: linear-gradient(145deg, #eadb9f, #dfc773);
}

.timing-cell.is-allodial::before {
  background: #74540f;
  box-shadow: 0 0 0 4px rgba(116, 84, 15, 0.1);
}

.timing-cell.is-allodial small {
  color: rgba(73, 54, 12, 0.68);
}

.timing-research {
  display: block;
  margin: 25px clamp(30px, 4.5vw, 58px) clamp(34px, 4vw, 50px);
  padding-top: 17px;
  grid-template-columns: none;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.timing-research > * {
  min-height: 0;
  padding: 0;
  border-right: 0;
}

.timing-research p {
  max-width: 900px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.5;
}

.timing-research strong {
  display: inline;
  margin-right: 7px;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Project corridor ---------------------------------------------------- */

.corridor-v5 {
  position: relative;
  z-index: 2;
  margin-top: clamp(70px, 8vw, 112px);
}

/* The head sits on its own white band that runs the full viewport width, the
   same edge-to-edge as the corridor stage directly beneath it. The band is
   painted by a pseudo-element rather than by widening the element itself, so
   the heading text stays on the shell's grid and keeps its left edge aligned
   with every other section on the page. */
.corridor-v5-head {
  position: relative;
  z-index: 0;
  display: grid;
  padding: clamp(42px, 4.4vw, 64px) 0 clamp(34px, 3.4vw, 46px);
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.58fr);
  align-items: end;
  gap: clamp(42px, 8vw, 120px);
}

.corridor-v5-head::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #fff;
  border-top: 1px solid rgba(199, 190, 167, 0.55);
  content: "";
}

.corridor-v5-head > div > p {
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 500;
}

.corridor-v5-head h3 {
  max-width: 790px;
  margin-top: 10px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.046em;
  line-height: 0.98;
  text-wrap: balance;
}

.corridor-v5-head > p {
  max-width: 430px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.corridor-project-switcher {
  display: grid;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #f7f5ee;
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
}

.corridor-project-switcher button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 88px;
  padding: 17px 20px 15px 48px;
  align-content: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, background-color 180ms ease;
}

.corridor-project-switcher button:last-child {
  border-right: 0;
}

.corridor-project-switcher button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 220ms ease;
  content: "";
}

.corridor-project-switcher button:hover,
.corridor-project-switcher button.is-active {
  color: var(--ink);
  background: #fffdf7;
}

.corridor-project-switcher button.is-active::after {
  transform: scaleX(1);
}

.corridor-project-switcher button > span {
  position: absolute;
  top: 20px;
  left: 18px;
  color: var(--gold-dark);
  font-family: var(--font-mono);
  font-size: 10px;
}

.corridor-project-switcher strong,
.corridor-project-switcher small {
  display: block;
  min-width: 0;
}

.corridor-project-switcher strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corridor-project-switcher small {
  margin-top: 4px;
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 10px;
}

.corridor-mobile-controls {
  display: none;
}

.corridor-v5-stage {
  position: relative;
  width: 100vw;
  height: clamp(500px, 41vw, 610px);
  min-height: 500px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background:
    radial-gradient(circle at 44% 44%, rgba(51, 92, 79, 0.48), transparent 38%),
    linear-gradient(145deg, #102d29 0%, #071b19 62%, #091411 100%);
  border-top: 1px solid rgba(199, 190, 167, 0.55);
  border-bottom: 1px solid rgba(199, 190, 167, 0.55);
  cursor: grab;
  touch-action: pan-y;
  isolation: isolate;
}

.corridor-v5-stage:active {
  cursor: grabbing;
}

.corridor-v5-stage .scene-fallback,
.corridor-v5-stage .parcel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.corridor-v5-stage .scene-fallback {
  background:
    linear-gradient(28deg, transparent 42%, rgba(181, 138, 42, 0.22) 42.3%, rgba(181, 138, 42, 0.72) 42.7%, transparent 44%),
    repeating-linear-gradient(78deg, transparent 0 54px, rgba(239, 233, 218, 0.08) 55px 56px),
    repeating-linear-gradient(168deg, transparent 0 70px, rgba(239, 233, 218, 0.07) 71px 72px);
  transition: opacity 500ms ease;
}

.corridor-v5-stage .parcel-canvas {
  z-index: 1;
  display: block;
  opacity: 0;
  transition: opacity 600ms ease;
}

.corridor-v5-stage.has-webgl .scene-fallback {
  opacity: 0;
}

.corridor-v5-stage.has-webgl .parcel-canvas {
  opacity: 1;
}

.corridor-v5-hud {
  position: absolute;
  z-index: 3;
  inset: 0;
  color: var(--inverse);
  pointer-events: none;
}

.corridor-v5-id {
  position: absolute;
  top: 26px;
  left: 28px;
  display: flex;
  flex-direction: column;
  text-shadow: 0 2px 18px rgba(2, 14, 13, 0.62);
}

.corridor-v5-id span,
.corridor-v5-id small,
.corridor-v5-state,
.scene-readout span,
.corridor-v5 .scene-legend,
.corridor-v5-metrics dt {
  color: rgba(239, 233, 218, 0.66);
  font-family: var(--font-mono);
  font-size: 10px;
}

.corridor-v5-id strong {
  margin-top: 5px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.corridor-v5-id small {
  margin-top: 5px;
}

.corridor-v5-state {
  position: absolute;
  top: 28px;
  right: 28px;
  display: flex;
  padding: 9px 11px;
  align-items: center;
  gap: 8px;
  background: rgba(6, 27, 24, 0.64);
  border: 1px solid rgba(239, 233, 218, 0.16);
  backdrop-filter: blur(12px);
}

.corridor-v5-state i {
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(212, 171, 67, 0.72);
}

.corridor-v5-state b {
  padding-left: 8px;
  color: var(--inverse);
  border-left: 1px solid rgba(239, 233, 218, 0.18);
  font-weight: 400;
}

.corridor-v5 .scene-readout {
  position: absolute;
  bottom: 80px;
  left: 28px;
  display: flex;
  width: min(350px, calc(100% - 56px));
  padding: 13px 15px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(6, 27, 24, 0.72);
  border: 1px solid rgba(239, 233, 218, 0.16);
  backdrop-filter: blur(12px);
}

.corridor-v5 .scene-readout strong {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

.corridor-v5 .scene-legend {
  position: absolute;
  bottom: 28px;
  left: 28px;
  display: flex;
  gap: 17px;
}

.corridor-v5 .scene-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.corridor-v5 .scene-legend i {
  display: block;
  width: 18px;
  height: 7px;
}

.corridor-v5 .legend-line {
  height: 1px !important;
  background: #d4ab43;
  box-shadow: 0 0 7px rgba(212, 171, 67, 0.7);
}

.corridor-v5 .legend-fill {
  background: rgba(212, 171, 67, 0.38);
  border: 1px solid #d4ab43;
}

.corridor-v5 .legend-boundary-3d {
  border: 1px solid rgba(239, 233, 218, 0.52);
}

.corridor-v5-metrics {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  min-width: 420px;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(6, 27, 24, 0.72);
  border: 1px solid rgba(239, 233, 218, 0.16);
  backdrop-filter: blur(12px);
}

.corridor-v5-metrics > div {
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid rgba(239, 233, 218, 0.14);
}

.corridor-v5-metrics > div:last-child {
  border-right: 0;
}

.corridor-v5-metrics dd {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.corridor-v5 .scene-instruction {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.corridor-v5-edge {
  display: grid;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 15px 18px;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  color: rgba(239, 233, 218, 0.68);
  background: #0b2925;
  border-bottom: 1px solid rgba(199, 190, 167, 0.48);
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
}

.corridor-v5-edge > span {
  color: #d9b95f;
}

.corridor-v5-edge b {
  color: var(--inverse);
  font-weight: 500;
}

@media (max-width: 900px) {
  .timing-window-head {
    grid-template-columns: minmax(150px, 0.36fr) minmax(0, 1fr);
    gap: 40px;
  }

  .timing-window-head h3 {
    font-size: clamp(35px, 5.5vw, 48px);
  }

  .timing-matrix-header,
  .timing-matrix-row {
    grid-template-columns: minmax(132px, 0.86fr) repeat(5, minmax(105px, 1fr));
  }

  .timing-cell {
    padding-right: 10px;
    padding-left: 10px;
  }

  .timing-cell::before {
    left: 10px;
  }

  .corridor-v5-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .corridor-v5-head > p {
    max-width: 620px;
  }

  .corridor-project-switcher {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .corridor-project-switcher button {
    min-width: 285px;
    flex: 1 0 285px;
    scroll-snap-align: start;
  }

  .corridor-mobile-controls {
    display: grid;
    min-height: 48px;
    padding: 6px 8px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    color: var(--subtle);
    background: #f7f5ee;
    border: 1px solid var(--line-strong);
    border-top: 0;
    border-bottom: 0;
    font-family: var(--font-mono);
    font-size: 10px;
  }

  .corridor-mobile-controls button {
    min-height: 36px;
    padding: 0 10px;
    color: var(--ink-2);
    background: #fffdf7;
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
  }

  .corridor-mobile-controls button:first-child {
    justify-self: start;
  }

  .corridor-mobile-controls button:last-child {
    justify-self: end;
  }

  .corridor-mobile-controls p {
    text-align: center;
  }

  .corridor-mobile-controls strong {
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 500;
  }

  .corridor-mobile-controls p span {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    text-transform: uppercase;
  }

  .corridor-v5-stage {
    height: 690px;
  }

  .corridor-v5-metrics {
    min-width: 370px;
  }
}

@media (max-width: 720px) {
  .timing-window {
    overflow: hidden;
  }

  .timing-window::before {
    background: radial-gradient(circle at 12% 0%, rgba(181, 138, 42, 0.075), transparent 27%);
  }

  .timing-window-head {
    display: block;
    min-height: 0;
    padding: 31px 20px 28px;
  }

  .timing-window-head > div:last-child {
    margin-top: 25px;
  }

  .timing-window-head h3 {
    font-size: clamp(32px, 9.7vw, 40px);
    line-height: 1;
  }

  .timing-window-head p {
    margin-top: 13px;
    font-size: 14px;
  }

  .timing-plot {
    height: auto;
    margin: 0 14px;
    overflow: hidden;
  }

  .timing-plot::before {
    display: none;
  }

  .timing-window-band {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-height: 76px;
    padding: 16px 17px;
    border-right: 0;
    border-bottom: 1px solid rgba(181, 138, 42, 0.24);
  }

  .timing-events {
    position: relative;
    inset: auto;
    display: block;
  }

  .timing-events::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 27px;
    width: 1px;
    background: linear-gradient(var(--gold), rgba(199, 190, 167, 0.58));
    content: "";
  }

  .timing-events li {
    display: block;
    min-height: 96px;
    padding: 22px 16px 20px 54px;
    border-bottom: 1px solid var(--line);
  }

  .timing-events li:last-child {
    border-bottom: 0;
  }

  .timing-events li::before {
    display: none;
  }

  .timing-events i,
  .timing-events li:first-child i {
    top: 25px;
    left: 22px;
  }

  .timing-events strong {
    display: block;
    font-size: 21px;
  }

  .timing-events small {
    display: block;
  }

  .timing-comparison {
    margin: 22px 14px 0;
  }

  .timing-matrix {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .timing-matrix-header {
    display: none;
  }

  .timing-matrix-row {
    display: grid;
    min-height: 0;
    margin-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line-strong);
  }

  .timing-matrix-row:first-of-type {
    margin-top: 0;
  }

  .timing-party {
    min-height: 72px;
    padding: 14px 15px;
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .timing-party span {
    font-size: 14px;
  }

  .timing-cell {
    min-height: 112px;
    padding: 34px 13px 13px;
    border-right: 1px solid rgba(199, 190, 167, 0.48);
    border-bottom: 1px solid rgba(199, 190, 167, 0.48);
  }

  .timing-cell:nth-child(3),
  .timing-cell:nth-child(5) {
    border-right: 0;
  }

  .timing-cell:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .timing-cell::after {
    position: absolute;
    top: 12px;
    right: 10px;
    left: 27px;
    overflow: hidden;
    color: currentColor;
    font-family: var(--font-mono);
    font-size: 10px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.56;
    content: attr(data-stage);
  }

  .timing-cell::before {
    top: 12px;
    left: 12px;
  }

  .timing-cell b {
    margin-top: 0;
    font-size: 12px;
  }

  .timing-cell small {
    font-size: 10px;
  }

  .timing-research {
    margin: 20px 14px 28px;
  }

  .corridor-v5 {
    margin-top: 74px;
  }

  .corridor-v5-head {
    padding-bottom: 24px;
  }

  .corridor-v5-head h3 {
    font-size: 38px;
  }

  .corridor-v5-head > p {
    font-size: 14px;
  }

  .corridor-project-switcher button {
    min-width: 255px;
    min-height: 82px;
    flex-basis: 255px;
    padding-left: 44px;
  }

  .corridor-v5-stage {
    height: 620px;
    min-height: 620px;
  }

  .corridor-v5-id {
    top: 18px;
    left: 18px;
    max-width: calc(100% - 36px);
  }

  .corridor-v5-id strong {
    max-width: 290px;
    font-size: 21px;
  }

  .corridor-v5-state {
    top: 102px;
    right: auto;
    left: 18px;
    padding: 7px 9px;
  }

  .corridor-v5-state b {
    display: none;
  }

  .corridor-v5 .scene-readout {
    right: 18px;
    bottom: 125px;
    left: 18px;
    width: auto;
  }

  .corridor-v5 .scene-legend {
    right: 18px;
    bottom: 94px;
    left: 18px;
    gap: 9px 12px;
  }

  .corridor-v5-metrics {
    right: 18px;
    bottom: 18px;
    left: 18px;
    min-width: 0;
  }

  .corridor-v5-metrics > div {
    padding: 10px;
  }

  .corridor-v5-metrics dd {
    font-size: 17px;
  }

  .corridor-v5-edge {
    display: block;
    padding: 14px 15px;
  }

  .corridor-v5-edge p {
    margin-top: 6px;
  }
}

@media (max-width: 420px) {
  .corridor-v5-head h3 {
    font-size: 34px;
  }

  .corridor-v5-stage {
    height: 590px;
    min-height: 590px;
  }

  .corridor-v5 .scene-legend {
    font-size: 10px;
  }

  .corridor-v5-metrics dt {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corridor-project-switcher button,
  .corridor-project-switcher button::after,
  .corridor-v5-stage .scene-fallback,
  .corridor-v5-stage .parcel-canvas {
    transition: none;
  }
}