/* SMACSS · Modules : bandeau, porte commune, puis une miniature par thème. */

/* Bandeau neutre */
.wordmark {
  font: 600 clamp(3.25rem, min(7.2vw, 12.5svh), 7.5rem) / 0.72 var(--font);
  letter-spacing: -0.065em;
  white-space: nowrap;
}
/* Le tiret bas est un curseur de terminal : il clignote lentement et prend la couleur du thème éveillé. */
.wordmark-cursor {
  display: inline-block;
  margin-left: 0.02em;
  animation: cursor-blink 1.4s steps(1) infinite;
  transition: color var(--slow) var(--ease);
}
@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}
.intro {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.intro-lead {
  font: 500 clamp(1.65rem, min(2.9vw, 5svh), 2.9rem) / 1.02 var(--font);
  letter-spacing: -0.03em;
}
.intro-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.4vw, 2.5rem);
  color: var(--muted);
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.intro-facts li {
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.intro-facts strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 767px) {
  .intro-facts {
    grid-template-columns: 1fr;
  }
  .intro-facts li {
    padding: 0.55rem 0;
  }
}

/* Indication vers les portes */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 600 clamp(1.05rem, 1.2vw, 1.25rem) / 1 var(--font);
  letter-spacing: -0.01em;
}
.cue-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
}
.cue-arrow::before {
  content: "↓";
  animation: cue-nudge 2.4s var(--ease) infinite;
}
@keyframes cue-nudge {
  0%,
  60%,
  100% {
    transform: translateY(-1px);
  }
  30% {
    transform: translateY(3px);
  }
}
.cue-note {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Porte : lien plein panneau, texte en bas, miniature derrière. */
.door {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(30rem, 78svh, 44rem);
  overflow: hidden;
}
.door:focus-visible {
  outline: 3px solid var(--door-focus);
  outline-offset: -10px;
}
/* Voile d'assombrissement des portes inactives (piloté par state.css). */
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--slow) var(--ease);
}
.mini {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.door-text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.65rem;
  padding: var(--pad);
}
.door-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}
.door-cta::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transition: width var(--slow) var(--ease);
}
.door:is(:hover, :focus-visible, .is-awake) .door-cta::after {
  width: 5.5rem;
}
.door-last {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.door-last::before {
  content: "";
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}
@media (min-width: 1024px) {
  .door {
    min-height: 0;
  }
  /* Largeur du panneau le plus étroit : le texte ne se recompose pas pendant l'élargissement. */
  .door-text {
    width: calc((100vw - 4 * var(--gutter)) / 3.75);
  }
}

/* Gothique : éclipse vivante et grain d'encre. */
.door--goth {
  --door-focus: var(--goth-focus);
  background: var(--goth-bg);
  color: var(--goth-ink);
}
.mini--goth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 20%;
  filter: brightness(0.5) saturate(0.75) contrast(1.05);
  transform: translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0) scale(var(--preview-zoom, 1.055));
  transition:
    opacity 1.2s ease-out,
    filter var(--slow) var(--ease);
}
.door--goth:is(:hover, :focus-visible, .is-awake) .mini--goth img {
  filter: brightness(0.92) saturate(1.05) contrast(1.05);
}
.goth-corona { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mini--goth::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      var(--goth-bg) 4%,
      color-mix(in srgb, var(--goth-bg) 85%, transparent) 30%,
      transparent 62%
    ),
    radial-gradient(
      130% 85% at 50% 28%,
      transparent 45%,
      color-mix(in srgb, var(--goth-bg) 85%, transparent) 100%
    );
}
.goth-glow {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--goth-flame) 34%, transparent),
    transparent 62%
  );
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: goth-flicker 4.2s infinite;
  transition: filter var(--slow) var(--ease);
}
.goth-glow--left {
  left: -30%;
  top: 44%;
}
.goth-glow--right {
  right: -32%;
  top: 30%;
  animation-duration: 5.3s;
  animation-delay: -1.7s;
}
.door--goth:is(:hover, :focus-visible, .is-awake) .goth-glow {
  filter: brightness(1.7);
}
.goth-grain {
  position: absolute;
  inset: -50%;
  background: url("../assets/grain.svg");
  opacity: 0.2;
  mix-blend-mode: overlay;
  animation: goth-grain 1s steps(5) infinite;
}
@keyframes goth-flicker {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  12% {
    opacity: 0.7;
  }
  18% {
    opacity: 0.48;
    transform: scale(0.97);
  }
  34% {
    opacity: 0.74;
    transform: scale(1.03);
  }
  52% {
    opacity: 0.6;
  }
  61% {
    opacity: 0.8;
    transform: scale(1.02);
  }
  78% {
    opacity: 0.5;
  }
}
@keyframes goth-grain {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-6%, 4%);
  }
  40% {
    transform: translate(5%, -7%);
  }
  60% {
    transform: translate(-3%, 8%);
  }
  80% {
    transform: translate(7%, 3%);
  }
}
.door--goth .door-index {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font: 500 1.5rem / 1 var(--goth-serif);
  color: var(--goth-gold);
}
.door--goth .door-index::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--goth-gold), transparent);
}
.door--goth .door-name {
  font: 500 clamp(3rem, 4.7vw, 5.6rem) / 0.9 var(--goth-serif);
  letter-spacing: -0.01em;
}
.door--goth .door-tagline {
  font: 500 clamp(1.15rem, 1.3vw, 1.4rem) / 1.35 var(--goth-serif);
  color: var(--goth-muted);
  text-wrap: pretty;
}
.door--goth :is(.door-cta, .door-last) {
  font: 500 1rem / 1 var(--goth-serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--goth-gold);
}

/* Rehoboam : dossier du sujet en tête, sphère et anneau, console qui questionne, puis le nom. */
.door--reho {
  --door-focus: var(--reho-ink);
  background: var(--reho-bg);
  color: var(--reho-ink);
  box-shadow: inset 0 0 0 1px var(--reho-red);
  font-family: var(--reho-font);
  font-variant-numeric: tabular-nums;
}
.door-highlight {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: var(--pad) var(--pad) 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid currentColor;
  color: var(--reho-red);
  font: 500 0.9375rem / 1.2 var(--font);
}
.door-highlight svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mini--reho {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) 0;
}
.door-highlight + .mini--reho {
  padding-top: 0.85rem;
}
.reho-file,
.reho-console {
  position: relative;
  z-index: 1;
}
.reho-head,
.reho-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reho-head {
  justify-content: space-between;
  margin-bottom: 0.4rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--reho-line-strong);
  color: var(--reho-quiet);
}
.reho-head > :last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--reho-ink);
}
.reho-head > :last-child::before {
  content: "";
  width: 0.35rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: reho-pulse 2.8s var(--ease) infinite;
}
@keyframes reho-pulse {
  50% {
    opacity: 0.25;
  }
}
.reho-row > :first-child {
  color: var(--reho-quiet);
}
/* Points de conduite entre libellé et valeur, comme une fiche de système. */
.reho-row::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted var(--reho-line-strong);
}
.reho-row > :last-child {
  order: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.08em;
  color: var(--reho-ink);
}
.reho-azimuth {
  transition: color var(--slow) var(--ease);
}
.door--reho:is(:hover, :focus-visible, .is-awake) .reho-azimuth {
  color: var(--reho-red);
}
.reho-stage {
  position: relative;
  flex: 1;
  min-height: 5rem;
  margin: 0 calc(-1 * var(--pad));
}
.reho-stage::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--reho-line);
}
/* Taille en pourcentage de la hauteur de la scène : l'élargissement du panneau ne redimensionne pas le canvas. */
.reho-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 160%;
  max-width: none;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.reho-console {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--reho-line-strong);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.reho-q {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-height: 1.35em;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--reho-muted);
}
.reho-prompt {
  color: var(--reho-ink);
}
.reho-caret {
  align-self: center;
  width: 0.5em;
  height: 1em;
  margin-left: -0.35rem;
  background: var(--reho-ink);
  animation: cursor-blink 1.1s steps(1) infinite;
}
.reho-a {
  min-height: 2.7em;
  color: var(--reho-ink);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .reho-file,
  .reho-console {
    width: calc((100vw - 4 * var(--gutter)) / 3.75 - 2 * var(--pad));
  }
}
@media (min-width: 1024px) and (max-height: 1000px) {
  .reho-row--extra {
    display: none;
  }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .reho-row {
    display: none;
  }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .reho-file,
  .reho-console,
  .door--reho .door-index {
    display: none;
  }
  .door-highlight {
    margin-top: 1rem;
  }
  .door--reho .door-text {
    gap: 0.5rem;
    padding-block: 1rem;
  }
}
@media (max-width: 1023px) {
  .reho-stage {
    flex: none;
    height: min(72vw, 40svh, 24rem);
    margin-block: 0.5rem;
  }
}
.door--reho .door-index {
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: var(--reho-quiet);
  font-variant-numeric: tabular-nums;
}
.door--reho .door-name {
  font: 300 clamp(1.5rem, 2vw, 2.6rem) / 1.1 var(--reho-font);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.door--reho .door-tagline {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--reho-muted);
}
.door--reho :is(.door-cta, .door-last) {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.door--reho .door-cta {
  color: var(--reho-red);
}
.door--reho .door-last::before {
  background: var(--reho-red);
}

/* Instrument : la machine posée sur le bureau, inclinée, qui se redresse quand on l'approche. */
.door--inst {
  --door-focus: var(--inst-ink);
  background: radial-gradient(
    120% 90% at 50% 30%,
    var(--inst-desk),
    var(--inst-desk-deep)
  );
  color: var(--inst-ink);
  font-family: var(--inst-font);
}
.mini--inst {
  bottom: 32%;
  display: grid;
  place-items: center;
  perspective: 1100px;
}
.inst-device {
  width: min(84%, 25rem);
  container-type: inline-size;
  transform: rotateX(20deg) translateY(3%);
  transform-origin: 50% 85%;
  transition: transform var(--slow) var(--ease);
}
.door--inst:is(:hover, :focus-visible, .is-awake) .inst-device {
  transform: rotateX(6deg) translateY(-2%);
}
/* Les unités cqi se mesurent sur .inst-device : tout le corps de la machine suit sa largeur. */
.inst-body {
  display: grid;
  gap: 3.6cqi;
  padding: 5cqi 5cqi 5.5cqi;
  border-radius: 2.4cqi;
  background:
    radial-gradient(circle at 2.8cqi 2.8cqi, var(--inst-alu-shade) 0 0.9cqi, transparent 1.05cqi),
    radial-gradient(circle at calc(100% - 2.8cqi) 2.8cqi, var(--inst-alu-shade) 0 0.9cqi, transparent 1.05cqi),
    radial-gradient(circle at 2.8cqi calc(100% - 2.8cqi), var(--inst-alu-shade) 0 0.9cqi, transparent 1.05cqi),
    radial-gradient(circle at calc(100% - 2.8cqi) calc(100% - 2.8cqi), var(--inst-alu-shade) 0 0.9cqi, transparent 1.05cqi),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--inst-alu-shade) 20%, transparent) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(172deg, var(--inst-alu), color-mix(in srgb, var(--inst-alu) 75%, var(--inst-alu-shade)));
  box-shadow:
    inset 0 1px 0 var(--inst-alu),
    inset 0 -0.6cqi 0 color-mix(in srgb, var(--inst-alu-shade) 80%, transparent),
    0 2cqi 3cqi -1cqi color-mix(in srgb, var(--inst-shadow) 45%, transparent),
    0 7cqi 11cqi -3cqi color-mix(in srgb, var(--inst-shadow) 40%, transparent);
}
.inst-top {
  display: flex;
  align-items: center;
  gap: 3.2cqi;
}
.inst-model {
  margin-right: auto;
  font: 600 4.6cqi / 1 var(--inst-font);
  letter-spacing: 0.06em;
}
.inst-led {
  width: 2.2cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--inst-led-off);
  transition: background 60ms, box-shadow 60ms;
}
.inst-led.is-on {
  background: var(--inst-signal);
  box-shadow: 0 0 2.2cqi var(--inst-signal);
}
.inst-knob {
  display: grid;
  justify-items: center;
  gap: 1cqi;
  font: 600 2.4cqi / 1 var(--inst-font);
  letter-spacing: 0.12em;
  color: var(--inst-muted);
}
.inst-knob i {
  position: relative;
  width: 7.5cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    color-mix(in srgb, var(--inst-graphite) 65%, var(--inst-alu)),
    var(--inst-graphite) 68%
  );
  box-shadow: 0 0.7cqi 1.1cqi color-mix(in srgb, var(--inst-shadow) 55%, transparent);
  rotate: var(--turn, -40deg);
}
.inst-knob i::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  width: 0.6cqi;
  height: 30%;
  translate: -50% 0;
  border-radius: 1px;
  background: var(--inst-alu);
}
.inst-knob:nth-of-type(3) i {
  --turn: 35deg;
}
.inst-knob:nth-of-type(4) i {
  --turn: -110deg;
}
.inst-screen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.4cqi 3cqi;
  margin: 1.3cqi;
  padding: 3cqi 3.6cqi;
  overflow: hidden;
  border-radius: 1.2cqi;
  background: var(--inst-screen);
  color: var(--inst-screen-ink);
  font: 400 5.6cqi / 0.9 var(--inst-screen-font);
  letter-spacing: 0.04em;
  box-shadow:
    0 0 0 1.3cqi var(--inst-graphite),
    inset 0 0 4cqi color-mix(in srgb, var(--inst-screen-ink) 7%, transparent);
}
.inst-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--inst-screen) 55%, transparent) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.inst-status {
  color: var(--inst-signal);
}
.inst-steps {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 1.1cqi;
  margin-top: 2.4cqi;
}
.inst-step {
  --key: var(--inst-key-1);
  position: relative;
  height: 9cqi;
  border-radius: 0.8cqi;
  background: var(--key);
  box-shadow:
    inset 0 -0.9cqi 0 color-mix(in srgb, var(--inst-shadow) 26%, transparent),
    0 0.6cqi 0.7cqi color-mix(in srgb, var(--inst-shadow) 40%, transparent);
  transition:
    transform 80ms,
    box-shadow 80ms,
    filter 80ms;
}
.inst-step:nth-child(n + 5) {
  --key: var(--inst-key-2);
}
.inst-step:nth-child(n + 9) {
  --key: var(--inst-key-3);
}
.inst-step:nth-child(n + 13) {
  --key: var(--inst-key-4);
}
.inst-step::before {
  content: "";
  position: absolute;
  top: -2.4cqi;
  left: 50%;
  width: 1.8cqi;
  height: 1.1cqi;
  translate: -50% 0;
  border-radius: 0.3cqi;
  background: var(--inst-led-off);
}
.inst-step.is-lit::before {
  background: var(--inst-signal);
  box-shadow: 0 0 1.4cqi color-mix(in srgb, var(--inst-signal) 70%, transparent);
}
.inst-step.is-head {
  transform: translateY(0.5cqi);
  filter: brightness(1.12);
  box-shadow:
    inset 0 -0.3cqi 0 color-mix(in srgb, var(--inst-shadow) 26%, transparent),
    0 0.2cqi 0.3cqi color-mix(in srgb, var(--inst-shadow) 40%, transparent);
}
.inst-step.is-head:not(.is-lit)::before {
  background: color-mix(in srgb, var(--inst-signal) 50%, var(--inst-led-off));
}
.door--inst .door-index {
  justify-self: start;
  padding: 0.4rem 0.6rem 0.45rem;
  border-radius: 4px;
  background: var(--inst-key-1);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--inst-shadow) 26%, transparent);
  font: 600 0.95rem / 1 var(--inst-font);
  letter-spacing: 0.14em;
}
.door--inst .door-name {
  font: 600 clamp(2.5rem, 3.6vw, 4.2rem) / 0.92 var(--inst-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.door--inst .door-tagline {
  font: 500 clamp(1.1rem, 1.25vw, 1.3rem) / 1.35 var(--inst-font);
  color: var(--inst-muted);
  text-wrap: pretty;
}
.door--inst :is(.door-cta, .door-last) {
  font: 600 0.95rem / 1 var(--inst-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.door--inst .door-cta {
  padding: 0.65rem 0.95rem 0.7rem;
  border-radius: 4px;
  background: var(--inst-graphite);
  color: var(--inst-alu);
  box-shadow:
    inset 0 -3px 0 var(--inst-screen),
    0 2px 4px color-mix(in srgb, var(--inst-shadow) 45%, transparent);
}
.door--inst .door-cta::after {
  display: none;
}
.door--inst .door-cta::before,
.door--inst .door-last::before {
  content: "";
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--inst-led-off);
  transition: background 200ms, box-shadow 200ms;
}
.door--inst:is(:hover, :focus-visible, .is-awake) .door-cta::before,
.door--inst .door-last::before {
  background: var(--inst-signal);
  box-shadow: 0 0 0.5rem var(--inst-signal);
}

/* Passage gothique : projection de l'éclipse et sceau tracé en deux matières. */
.gothic-portal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: strict;
}
.gothic-portal[hidden] { display: none; }
.portal-veil, .portal-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal-veil { background: var(--portal-night); opacity: 0; }
.portal-disc {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: var(--portal-night);
  box-shadow: 0 0 12px 2px var(--portal-flame), 0 0 3px 1px var(--portal-core);
  will-change: transform;
}
.portal-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 58vh, 540px);
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--portal-blood-dark));
}
.portal-seal path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.portal-ink { stroke: var(--portal-blood); stroke-width: 4.5; }
.portal-ink--fine { stroke-width: 2.4; }
.portal-metal { stroke: url(#portal-metal); stroke-width: 1.25; }
.portal-metal--fine { stroke-width: .75; }
.portal-trace { fill: var(--portal-core); filter: drop-shadow(0 0 3px var(--portal-flame)); }
.portal-drip { stroke: var(--portal-blood); stroke-width: 2.3; }
@media (max-width: 767px) { .portal-seal { width: min(78vw, 55vh); } }
.portal-world { position: absolute; overflow: hidden; will-change: transform; }
.portal-world-image { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Modules de la version courte, en contraste rouge. */
.cue { position: relative; transform: translateX(var(--cue-x, 0px)); transition: transform 600ms var(--ease), color 300ms; white-space: nowrap; }
.cue-copy { transition: opacity 300ms; }
.cue-note { transition: opacity 300ms; }
.discovery { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem .65rem; max-width: 100%; padding: .55rem .75rem; overflow: hidden; border: 1px solid var(--rule); isolation: isolate; }
.discovery::before { content: ''; position: absolute; inset: 0; background: var(--overview-accent); transform: translateY(102%); transition: transform 650ms cubic-bezier(.16,1,.3,1); z-index: -1; }
.discovery-index { grid-column: 1; grid-row: 1; font: 600 .75rem var(--font); white-space: nowrap; }
.discovery-label { grid-column: 2; grid-row: 1; font-weight: 600; }
.discovery-detail { grid-column: 1 / 3; grid-row: 2; font-size: .75rem; color: var(--muted); transition: color 400ms; }
.discovery-arrow { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; transition: transform 650ms var(--ease); }
.overview { position: relative; isolation: isolate; background: var(--overview-paper); color: var(--overview-ink); }
.overview-thread { position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; overflow: hidden; pointer-events: none; fill: none; stroke: var(--overview-accent); stroke-width: 1.25; }
.thread-trunk { opacity: .85; }
.thread-branch { opacity: .7; }
.thread-proof-route { stroke-width: 2; }
.thread-light { stroke: var(--overview-signal); }
.thread-tip { fill: var(--overview-accent); stroke: none; }
.overview button, .overview input, .overview textarea { font: inherit; color: inherit; }
.overview button { cursor: pointer; }
.overview-section { position: relative; padding: 2rem var(--overview-pad) clamp(4rem, 7vw, 8rem); scroll-margin-top: 24px; }
.overview-section::after, .l-entry::after, .young-bridge::after { content: ''; pointer-events: none; position: absolute; inset: 0; border: 2px solid var(--overview-accent); opacity: 0; z-index: 4; }
.l-entry { position: relative; }
.overview-nav { display: flex; gap: 2rem; align-items: center; padding: 1.5rem var(--overview-pad); border-bottom: 1px solid var(--overview-line); }
.overview-nav > div { display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 2vw, 2.5rem); margin-left: auto; font-size: .85rem; }
.overview-nav > .micro { margin-left: 2rem; }
.overview-signature { font-size: 2.2rem; font-weight: 650; letter-spacing: -.1em; }
.overview-nav a { transition: color 250ms; }
.micro { font: 600 .75rem/1.7 var(--font); letter-spacing: .025em; }
.section-rail { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--overview-line); padding-top: .85rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section-label { position: relative; }
.section-label-text { opacity: calc(1 - var(--hack-cover, 0)); }
.section-label-code { position: absolute; inset: 0; overflow: hidden; color: var(--overview-accent); opacity: var(--hack-cover, 0); pointer-events: none; user-select: none; }
.atelier .section-label-code, .terminal-section .section-label-code, .watch-section .section-label-code { color: var(--overview-signal); }
.rail-mark { color: var(--overview-accent); font-size: 1.5rem; line-height: 1; }
.l-overview-intro { padding-top: 3rem; }
.l-overview-intro .section-rail { border: 0; padding: 0; }
.editorial-title { font-size: clamp(3.2rem, 7vw, 8.5rem); font-weight: 550; letter-spacing: -.065em; line-height: .95; }
.editorial-title span { color: var(--overview-accent); }
.intro-code { margin-top: 2rem; color: var(--overview-muted); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.intro-copy { padding-top: 1rem; max-width: 36rem; }
.intro-kicker { font-weight: 600; margin-bottom: 1.5rem; }
.intro-copy > p:nth-child(2) { color: var(--overview-muted); font-size: clamp(1rem, 1.3vw, 1.35rem); line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 1.5rem; padding-bottom: .3rem; margin-top: 1.75rem; font-size: .9rem; border-bottom: 1px solid var(--overview-ink); transition: gap 350ms var(--ease), color 350ms; }
.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(3rem, 7vw, 7rem) 0 0; border-top: 1px solid var(--overview-line); }
.proofs > div { position: relative; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--overview-line); padding: 1.5rem 2rem 0 0; }
.proofs > div > * { position: relative; z-index: 1; }
.proofs > div::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--overview-accent) 7%, transparent); opacity: 0; clip-path: inset(0 calc((1 - var(--proof-scan, 0)) * 100%) 0 0); pointer-events: none; }
.proofs > div + div { padding-left: 2rem; }
.proofs > div:last-child { border-right: 0; }
.proofs dt { order: 1; font-weight: 600; font-size: .85rem; }
.proofs dd { margin: 0 0 1rem; font-size: clamp(3.5rem, 7vw, 7rem); letter-spacing: -.07em; line-height: 1.1; font-weight: 550; color: var(--overview-ink); }
.proof-ink { position: absolute; inset: 0; color: var(--overview-accent); clip-path: inset(0 calc((1 - var(--proof-fill, 0)) * 100%) 0 0); pointer-events: none; }
.proofs p { order: 2; color: var(--overview-muted); font-size: .75rem; margin-top: .3rem; }
.atelier, .terminal-section { background: var(--overview-night); color: var(--overview-white); color-scheme: dark; }
.atelier .section-rail, .terminal-section .section-rail { border-color: var(--overview-dark-line); }
.atelier .section-rail { margin-bottom: 1.5rem; }
.art-copy { position: relative; z-index: 1; padding-right: clamp(1rem, 3vw, 4rem); }
.art-copy h2 { font-size: clamp(3rem, 4.5vw, 6rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.05; margin-top: 1.25rem; }
.art-copy h2 span { color: var(--overview-quiet); }
.art-copy > p:not(.micro) { max-width: 25rem; margin-top: 1.75rem; color: var(--overview-quiet); font-size: .95rem; line-height: 1.7; }
.art-formula { margin-top: 2.5rem; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--overview-quiet); overflow-wrap: anywhere; }
.art-state { display: block; margin-top: .8rem; font-size: .8rem; }
.art-stage { position: relative; margin: 0; min-width: 0; height: clamp(430px, 45vw, 780px); background: var(--overview-night); overflow: hidden; }
.art-stage > img { width: 100%; height: 100%; object-fit: cover; }
.art-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.art-grid-base { stroke: var(--overview-white); stroke-width: .6; }
.art-grid-glow { stroke: var(--overview-signal); stroke-width: 5; opacity: .12; }
.art-grid-ink { stroke: var(--overview-signal); stroke-width: 1.2; stroke-linecap: round; }
.art-grid-ink--0 { opacity: .14; }
.art-grid-ink--1 { opacity: .4; }
.art-grid-ink--2 { opacity: .85; }
.art-coordinate { position: absolute; left: 1rem; bottom: 1rem; color: var(--overview-quiet); }
.art-control { width: 61.8%; margin: 2rem 0 0 auto; border-top: 1px solid var(--overview-dark-line); padding-top: 1.5rem; }
.range-labels { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.range-labels output { font: .75rem var(--font); color: var(--overview-quiet); font-variant-numeric: tabular-nums; }
#art-range { appearance: none; display: block; width: 100%; height: 30px; background: transparent; margin: .75rem 0; cursor: ew-resize; }
#art-range::-webkit-slider-runnable-track { height: 2px; background: var(--overview-quiet); }
#art-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -8px; background: var(--overview-white); border: 4px solid var(--overview-night); outline: 1px solid var(--overview-white); border-radius: 0; }
#art-range::-moz-range-track { height: 2px; background: var(--overview-quiet); }
#art-range::-moz-range-thumb { width: 12px; height: 12px; background: var(--overview-white); border: 3px solid var(--overview-night); border-radius: 0; outline: 1px solid var(--overview-white); }
.range-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--overview-quiet); }
.range-foot button { background: transparent; border: 1px solid var(--overview-dark-line); padding: .3rem .7rem; font-size: .7rem; }
.constellation-panel { min-width: 0; }
#activites { --constellation-split: 50%; }
.constellation-facets { --facet-type: clamp(1rem, 1.65vw, 1.7rem); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--overview-ink); }
.constellation-facets::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 var(--constellation-split); background: var(--overview-accent); transform: scaleX(var(--facet-birth, 1)); transform-origin: left; pointer-events: none; }
.constellation-facet { display: flex; flex-direction: column; justify-content: center; gap: .618rem; min-height: 8rem; padding: 1rem 1.618rem; color: var(--overview-white); }
.constellation-facet .micro { font-size: .6rem; letter-spacing: .06em; }
.constellation-facet--engineer strong { font: 600 var(--facet-type)/1.2 var(--font); letter-spacing: -.04em; }
.constellation-facet--artist strong { font: 400 calc(var(--facet-type) * var(--phi))/1 var(--font-artist); }
.constellation { --constellation-blend: .5; --constellation-color: var(--overview-ink); --constellation-fusion: 1; position: relative; width: 100%; min-height: 380px; height: auto; aspect-ratio: var(--phi); isolation: isolate; }
.constellation::before { content: ''; position: absolute; z-index: -1; inset: 0; width: var(--constellation-split); background-image: linear-gradient(color-mix(in srgb, var(--overview-ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--overview-ink) 7%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--overview-ink) 13%, var(--overview-paper)), var(--overview-paper)); background-size: 1.618rem 1.618rem, 1.618rem 1.618rem, 100% 100%; pointer-events: none; }
.constellation::after { content: ''; position: absolute; z-index: -1; inset: 0 0 0 var(--constellation-split); background: linear-gradient(180deg, color-mix(in srgb, var(--overview-accent) 24%, var(--overview-paper)), var(--overview-paper)); pointer-events: none; }
.constellation-links, .constellation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.constellation-links { fill: none; stroke: var(--overview-ink); stroke-width: .7; }
.constellation-path { opacity: calc(.382 + (1 - var(--constellation-blend)) * .236); transition: stroke 250ms, opacity 250ms, stroke-width 250ms; }
.constellation-path:nth-child(even) { stroke: var(--overview-accent); stroke-width: 1.13; }
.constellation-orbit { position: absolute; width: min(76%, 290px); height: 290px; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: none; stroke: var(--constellation-color); stroke-width: 1.2; stroke-dasharray: .1 5; stroke-linecap: round; opacity: var(--constellation-blend); pointer-events: none; }
.constellation-convergence { position: absolute; top: 50%; left: 50%; width: 210px; height: 210px; transform: translate(-50%, -50%); fill: none; stroke-width: 1; opacity: calc(.382 + var(--constellation-fusion) * .618); pointer-events: none; }
.convergence-engineer { stroke: var(--overview-ink); stroke-dasharray: 3 5; }
.convergence-artist, .convergence-arrow { stroke: var(--overview-accent); stroke-width: 1.618; }
.constellation-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 118px; height: 104px; color: var(--overview-white); font-size: 1.8rem; font-weight: 650; letter-spacing: -.1em; }
.constellation-center::before, .constellation-center::after { content: ''; position: absolute; inset: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.constellation-center::before { background: var(--overview-ink); }
.constellation-center::after { inset: 1.5px; background: linear-gradient(90deg, var(--overview-ink) 50%, var(--overview-accent) 50%); }
.constellation-center > span { position: relative; z-index: 1; padding-right: .1em; }
.constellation-center small { display: block; margin-top: .382rem; font: 600 .6rem var(--font); letter-spacing: .025em; }
.constellation button { position: absolute; display: flex; flex-direction: column; gap: .3rem; background: var(--overview-paper); border: 1px solid var(--overview-line); padding: .75rem 1rem; text-align: left; font-size: .85rem; transition: border-color 300ms, background 300ms, color 300ms; }
.constellation button::before { content: ''; position: absolute; width: 5px; height: 5px; background: var(--overview-accent); left: var(--node-x, 0px); top: var(--node-y, 50%); transform: translate(-50%, -50%); pointer-events: none; }
.constellation button:nth-of-type(1) { top: 4%; left: 5%; }
.constellation button:nth-of-type(2) { top: 15%; right: 2%; }
.constellation button:nth-of-type(3) { bottom: 4%; left: 2%; }
.constellation button:nth-of-type(4) { bottom: 15%; right: 3%; }
.constellation button:nth-of-type(odd) { border-color: var(--overview-ink); font-family: var(--font); font-size: .85rem; font-weight: 600; }
.constellation button:nth-of-type(even) { color: var(--overview-accent); border-color: var(--overview-accent); border-radius: .618rem 0 .618rem 0; font: 1.213rem/1.2 var(--font-artist); }
.constellation button:nth-of-type(even) .micro { font-style: normal; }
.constellation-control { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--overview-line); }
.constellation-control .range-labels { font-size: .75rem; }
.constellation-control output { color: var(--overview-muted); }
#constellation-range { appearance: none; display: block; width: 100%; height: 30px; background: transparent; margin: .5rem 0; cursor: ew-resize; }
#constellation-range::-webkit-slider-runnable-track { height: 1px; background: var(--overview-line); }
#constellation-range::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border: 0; border-radius: 0; background: var(--overview-accent); }
#constellation-range::-moz-range-track { height: 1px; background: var(--overview-line); }
#constellation-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--overview-accent); }
.constellation-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.constellation-foot > p { max-width: 24rem; font-size: .75rem; color: var(--overview-muted); }
.constellation-foot > button { flex-shrink: 0; min-height: 44px; padding: .3rem .7rem; border: 1px solid var(--overview-line); background: transparent; font-size: .7rem; }
.hybrid-kicker { color: var(--overview-accent); }
.hybrid-title { font-size: clamp(2rem, 3.5vw, 4rem); letter-spacing: -.065em; line-height: 1.1; font-weight: 500; margin-top: 1rem; }
.hybrid-title > span { color: var(--overview-accent); }
.hybrid-exchange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.618fr); gap: .618rem; align-items: center; padding: 1.618rem 0; margin-top: 1rem; border-bottom: 1px solid var(--overview-line); }
.hybrid-exchange > span:first-child { font: 500 .8rem/1.6 var(--font); }
.hybrid-exchange > span:nth-child(2) { color: var(--overview-accent); font-size: 1.618rem; }
.hybrid-exchange > blockquote { margin: 0; color: var(--overview-accent); font: italic 1.133rem/1.4 var(--font-artist); }
.hybrid-exchange cite { display: block; margin-top: .618rem; color: var(--overview-muted); font: .75rem/1.6 var(--font); }
.hybrid-exchange cite a { text-decoration: underline; text-underline-offset: .2em; }
.hybrid-splash { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin: 0 0 -6rem auto; pointer-events: none; }
.hybrid-splash img { width: 100%; height: 100%; object-fit: contain; }
.activity-prompt { margin-top: 1.618rem; color: var(--overview-muted); }
.activity-detail h3 { font-size: clamp(1.236rem, 2.16vw, 2.472rem); letter-spacing: -.045em; line-height: 1.1; font-weight: 500; margin-top: 1rem; }
.activity-detail > p { color: var(--overview-muted); line-height: 1.7; margin-top: 1rem; min-height: 6rem; }
.music-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.music-feature .micro { color: var(--overview-accent); }
.music-feature h2 { font: 500 clamp(3.5rem, 6vw, 7rem)/1 var(--font-artist); letter-spacing: -.045em; }
.music-art { min-width: 0; }
.piano-art { margin: 1.5rem 0 0; width: 100%; max-width: 32.5rem; aspect-ratio: 520 / 448; }
.piano-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.piano-art path { vector-effect: non-scaling-stroke; }
.piano-shadow { fill: color-mix(in srgb, var(--overview-ink) 4%, transparent); }
.piano-body { fill: color-mix(in srgb, var(--overview-ink) 4%, var(--overview-paper)); stroke: var(--overview-ink); stroke-width: 1.2; }
.piano-side, .piano-cheek { fill: color-mix(in srgb, var(--overview-ink) 11%, var(--overview-paper)); stroke: var(--overview-ink); stroke-width: .8; }
.piano-front { fill: color-mix(in srgb, var(--overview-ink) 7%, var(--overview-paper)); stroke: var(--overview-ink); stroke-width: .8; }
.piano-leg, .piano-caster { fill: var(--overview-ink); }
.piano-leg-side { fill: var(--overview-muted); }
.piano-pedal-frame { stroke: var(--overview-ink); stroke-width: 1.1; }
.piano-pedal { fill: var(--overview-ink); }
.piano-pedal-accent { fill: var(--overview-accent); }
.piano-lid { fill: color-mix(in srgb, var(--overview-ink) 6%, var(--overview-paper)); stroke: var(--overview-ink); stroke-width: 1.3; }
.piano-lid-rim { stroke: var(--overview-muted); stroke-width: .55; }
.piano-lid-support { stroke: var(--overview-ink); stroke-width: 2; stroke-linecap: round; }
.piano-hinge { stroke: var(--overview-ink); stroke-width: 2.5; }
.piano-soundboard { fill: var(--overview-paper); }
.piano-rim { stroke: var(--overview-ink); stroke-width: .65; }
.piano-strings { stroke: var(--overview-muted); stroke-width: .35; }
.piano-bridge { stroke: var(--overview-ink); stroke-width: 1.25; }
.piano-plate { stroke: var(--overview-muted); stroke-width: 1; }
.piano-string-accent { stroke: var(--overview-accent); stroke-width: .85; }
.piano-keyframe, .piano-music-stand { fill: color-mix(in srgb, var(--overview-ink) 3%, var(--overview-paper)); stroke: var(--overview-ink); stroke-width: .9; }
.piano-stand-line { stroke: var(--overview-muted); stroke-width: .55; }
.piano-fallboard { fill: var(--overview-ink); }
.piano-keybed { fill: var(--overview-paper); stroke: var(--overview-ink); stroke-width: .7; }
.piano-key-lines { stroke: var(--overview-ink); stroke-width: .35; }
.piano-key-lip { stroke: var(--overview-ink); stroke-width: .6; }
.piano-black-keys { fill: var(--overview-ink); }
.piano-key-lights { fill: var(--overview-accent); }
.piano-key-lights path { opacity: var(--piano-key-light, 0); }
.piano-trace { stroke: var(--overview-accent); stroke-width: 1.5; opacity: var(--piano-trace-visible, 0); }
.music-duration { margin-top: 1rem; color: var(--overview-muted); font-size: .9rem; }
.music-feature-copy > p { font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.6; }
.music-recordings { margin-top: 1.5rem; }
.music-recordings > div { border-top: 1px solid var(--overview-line); padding-block: 1rem; }
.music-recordings dt { font-size: .85rem; font-weight: 600; }
.music-recordings dd { margin: .5rem 0 0; color: var(--overview-muted); font-size: .9rem; line-height: 1.7; }
.music-feature .button-red { margin-top: 1rem; }
@media (max-width: 767px) { .music-feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.projects-section { border-top: 1px solid var(--overview-line); }
.projects-section .section-rail { border-top: 0; }
.project-art { position: relative; isolation: isolate; height: clamp(370px, 37vw, 600px); background: var(--overview-ink); color: var(--overview-white); overflow: hidden; padding: 1.5rem; }
.project-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--overview-accent); clip-path: circle(calc(var(--project-paint, 1) * 150%) at 0 18%); pointer-events: none; }
.project-monogram { position: relative; font-size: clamp(5rem, 12vw, 12rem); line-height: .82; letter-spacing: -.08em; font-weight: 600; padding-top: 2.5rem; }
.project-monogram span { font-size: .5em; letter-spacing: -.06em; }
.river-lines { position: absolute; width: 150%; height: 60%; bottom: -6%; left: -20%; transform: rotate(-22deg); }
.river-lines i { display: block; width: 100%; height: 18%; border-top: 1px solid color-mix(in srgb, var(--overview-white) 25%, transparent); border-radius: 50%; }
.project-art-foot { position: absolute; bottom: 1.5rem; left: 1.5rem; }
.project-copy h2 { font-size: clamp(2.8rem, 4.8vw, 5.5rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.05; margin: 1rem 0 1.5rem; max-width: 12ch; }
.project-summary { font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.6; }
.project-copy > p:nth-of-type(3) { color: var(--overview-muted); font-size: .9rem; line-height: 1.7; margin-top: 1rem; }
.button-red { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--overview-accent); border: 1px solid var(--overview-accent); color: var(--overview-white) !important; padding: .85rem 1.2rem; font-size: .85rem !important; transition: gap 350ms var(--ease), background 350ms; }
.project-copy .button-red { margin-top: 2rem; }
.project-list { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.project-list a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; border-top: 1px solid var(--overview-line); padding: 1rem 0; font-size: .9rem; transition: color 250ms; }
.project-list a > span:first-child { font: .75rem var(--font); color: var(--overview-muted); }
/* La veille et le mémoire laissent les illustrations au second plan de la lecture. */
.watch-section { background: var(--overview-night); color: var(--overview-white); color-scheme: dark; }
.watch-section, .research-section { padding-bottom: clamp(3rem, 5vw, 5rem); }
.watch-section .section-rail { border-color: var(--overview-dark-line); color: var(--overview-quiet); }
.watch-section .section-rail, .research-section .section-rail { margin-bottom: 2rem; }
.watch-copy > .micro { color: var(--overview-signal); }
.watch-copy h2 { font-size: clamp(3.5rem, 6.5vw, 7rem); line-height: 1; letter-spacing: -.055em; font-weight: 500; margin: 1.25rem 0 1.75rem; }
.watch-copy h2 > span { color: var(--overview-signal); }
.watch-practice { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.7; color: var(--overview-quiet); max-width: 38ch; }
.watch-cadence { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.5rem; font: .8rem var(--font); }
.watch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--overview-signal); }
.watch-drawing, .research-drawing { min-width: 0; position: relative; }
.watch-drawing { color: var(--overview-quiet); padding: 2rem 0 1rem; }
.science-stage { position: relative; width: 100%; overflow: hidden; }
.science-stage--horizons { height: clamp(200px, 28vw, 340px); }
.science-stage--quantum { aspect-ratio: 540 / 410; }
.science-stage canvas, .science-stage > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.science-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.science-foot .drawing-foot { margin: 0; text-align: left; }
.science-foot button, .young-controls button { font: .75rem var(--font); color: inherit; background: transparent; border: 1px solid currentColor; padding: .45rem .65rem; cursor: pointer; }
.quantum-equations { margin-top: 1rem; border-top: 1px solid var(--overview-line); padding-top: 1rem; }
.quantum-equations p { display: flex; flex-direction: column; gap: .3rem; font: .7rem/1.6 var(--font-mono); }
.quantum-equations p + p { margin-top: .75rem; }
.quantum-equations p > span:first-child { color: var(--overview-muted); font: .65rem var(--font); }
.quantum-equations p > span:last-child { color: var(--overview-accent); }
.young-bridge { position: relative; margin: 0; padding: 2rem var(--overview-pad) 1.5rem; background: linear-gradient(var(--overview-night) 0%, var(--overview-night) 60%, var(--overview-paper) 95%); color: var(--overview-white); }
.young-bridge figcaption { display: flex; flex-direction: column; align-items: flex-end; gap: .8rem; text-align: right; }
.young-bridge figcaption > .micro { color: var(--overview-quiet); }
.young-bridge h2 { font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.young-bridge h2 > span { color: var(--overview-signal); }
.young-bridge figcaption > p { color: var(--overview-quiet); font-size: .85rem; }
.science-stage--young { height: clamp(300px, 39vw, 550px); margin-top: 1rem; }
.young-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; color: var(--overview-ink); margin-top: 1rem; }
.young-controls label { font: .8rem var(--font); }
.young-controls output { display: inline-block; min-width: 3ch; margin-left: .5rem; }
.young-controls input { width: 100%; min-width: 0; accent-color: var(--overview-accent); }
.young-fallback-waves { stroke: var(--overview-signal); stroke-width: 1; opacity: .4; }
.young-fallback-barrier { stroke: var(--overview-white); stroke-width: 2; }
.young-fallback-beam { stroke: var(--overview-white); stroke-width: 1; opacity: .45; }
@media (max-width: 767px) {
  .science-stage--young { height: 350px; }
  .young-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .young-controls input { grid-column: 1 / -1; grid-row: 2; }
  .young-controls button { grid-column: 2; grid-row: 1; }
}
.drawing-caption, .drawing-foot { display: block; font-size: .6rem; }
.drawing-caption { margin-bottom: 1rem; }
.drawing-foot { margin-top: .75rem; text-align: right; }
.drawing-grid-pattern { stroke: currentColor; stroke-width: .5; }
.drawing-grid { opacity: .15; stroke: none; }
.drawing-mask-stop { stop-color: var(--overview-white); }
.drawing-axis { stroke: currentColor; stroke-width: .6; opacity: .45; }
.watch-contours { stroke: currentColor; stroke-width: .7; opacity: .5; }
.watch-observed, .watch-cross { stroke: var(--overview-white); stroke-width: 1.5; }
.watch-projections { stroke: var(--overview-signal); stroke-width: 1.25; stroke-dasharray: 5 5; }
.watch-boundary { stroke: currentColor; stroke-width: .7; stroke-dasharray: 2 5; opacity: .6; }
.watch-nodes { fill: var(--overview-night); stroke: var(--overview-signal); stroke-width: 1.5; }
.watch-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(2rem, 5vw, 6rem); border-top: 1px solid var(--overview-dark-line); margin-top: 2.5rem; padding-top: 1.75rem; }
.watch-note .micro { color: var(--overview-quiet); font-size: .65rem; }
.watch-note h3 { font-size: clamp(1.8rem, 2.8vw, 3rem); letter-spacing: -.04em; line-height: 1.15; margin-top: .6rem; }
.watch-note [data-watch-view] { margin-top: .75rem; line-height: 1.7; max-width: 54ch; }
.research-section { padding-top: 2.5rem; }
.research-degree > .micro:first-child { color: var(--overview-muted); }
.research-degree h2 { font-size: clamp(3.3rem, 6vw, 6.75rem); line-height: .95; font-weight: 500; letter-spacing: -.055em; max-width: 8ch; margin: 1.25rem 0 1.5rem; }
.degree-detail { color: var(--overview-muted); max-width: 48ch; line-height: 1.7; font-size: .9rem; }
.research-format { color: var(--overview-accent); margin-top: 2.5rem; }
.research-degree h3 { font-size: clamp(1.7rem, 2.8vw, 3rem); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; margin-top: .7rem; max-width: 18ch; }
.research-description { margin-top: 1rem; max-width: 48ch; line-height: 1.7; color: var(--overview-muted); }
.research-drawing { color: var(--overview-muted); }
.research-rings { stroke: var(--overview-ink); stroke-width: .65; opacity: .5; }
.research-rings--tilted { opacity: .3; }
.research-rings--signal { stroke: var(--overview-accent); stroke-width: 1; opacity: .85; }
.research-core { fill: var(--overview-accent); }
.research-brackets { stroke: var(--overview-accent); stroke-width: 1.5; }
.research-bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--overview-line); padding-top: 1.5rem; margin-top: 2.5rem; }
.research-bottom > p { color: var(--overview-muted); font-size: .8rem; line-height: 1.6; max-width: 56ch; }
.research-bottom .text-link { flex-shrink: 0; margin: 0; font-size: .8rem; }
@media (max-width: 767px) {
  .watch-drawing { padding-top: 0; }
  .watch-note { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
  .research-drawing { max-width: 400px; justify-self: center; width: 100%; }
  .research-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .overview-nav > div { flex-wrap: wrap; row-gap: .6rem; }
}
.contact-section { border-top: 1px solid var(--overview-line); }
.contact-section .section-rail { border-top: 0; }
.contact-section .editorial-title { font-size: clamp(3.3rem, 5.5vw, 6.3rem); }
.contact-email { display: block; width: fit-content; font-size: .95rem; margin-top: 2rem; border-bottom: 1px solid var(--overview-line); overflow-wrap: anywhere; }
.contact-code { margin-top: 2rem; color: var(--overview-muted); font: clamp(.65rem, .8vw, .8rem)/1.8 var(--font-mono); letter-spacing: 0; text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-code code { font: inherit; }
.contact-code code > span { color: var(--overview-accent); }
#contact-form { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.25rem, 2.5vw, 2.5rem); border-top: 2px solid var(--overview-accent); background: transparent; }
#contact-form .contact-field { position: relative; display: block; padding-top: 1.35rem; }
#contact-form .contact-field > span { position: absolute; top: 2.25rem; left: 0; color: var(--overview-muted); font-size: 1rem; line-height: 1.4; pointer-events: none; transform-origin: left top; transition: transform 240ms var(--ease), color 240ms var(--ease); }
#contact-form .contact-field::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--overview-accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); pointer-events: none; }
#contact-form .l-form-row { margin-bottom: 2rem; }
#contact-form .contact-field--message { display: flex; flex-direction: column; flex: 1; }
#contact-form .contact-field--message > span { top: 2.35rem; left: 1rem; }
#contact-form input, #contact-form textarea { display: block; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--overview-line); background: transparent; border-radius: 0; padding: .9rem 0; font-size: 1rem; line-height: 1.4; resize: vertical; }
#contact-form textarea { flex: 1; min-height: 14rem; padding: 1rem; border: 1px solid var(--overview-line); }
#contact-form ::placeholder { color: var(--overview-muted); opacity: 1; }
.form-footer { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; margin-top: 1.5rem; }
.form-footer p, .form-status { font-size: .75rem; color: var(--overview-muted); }
.form-status { margin-top: 1rem; }
.form-status:empty { display: none; }
.terminal-section { padding-bottom: 1.5rem; }
.terminal-section .section-rail { margin-bottom: 2.5rem; }
.terminal-led { color: var(--overview-quiet); }
.terminal-led::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: .65rem; background: var(--overview-signal); }
.terminal-console, .terminal-metrics { font: .8rem/1.8 var(--font-mono); min-width: 0; }
.terminal-log { height: 180px; overflow: auto; scrollbar-width: thin; margin-bottom: 1rem; overflow-wrap: anywhere; }
.terminal-log p { padding: .08rem 0; }
.terminal-boot { color: var(--overview-quiet); }
.terminal-entered { color: var(--overview-white); margin-top: .5rem; }
.terminal-error { color: var(--overview-signal); }
#terminal-form { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--overview-quiet); padding: .5rem 0; }
#terminal-form label { color: var(--overview-signal); font-size: 1.2rem; }
#terminal-form input { min-width: 0; width: 100%; background: transparent; border: 0; border-radius: 0; padding: .4rem; caret-color: var(--overview-signal); }
#terminal-form input::placeholder { color: var(--overview-quiet); opacity: 1; }
#terminal-form button { background: transparent; border: 0; color: var(--overview-white); padding: .4rem .65rem; }
.terminal-help { color: var(--overview-quiet); font-size: .65rem; margin-top: .8rem; }
.terminal-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.terminal-shortcuts button { background: transparent; border: 1px solid var(--overview-dark-line); color: var(--overview-quiet); font-size: .65rem; padding: .3rem .7rem; transition: color 250ms, border-color 250ms; }
.terminal-metrics { border-left: 1px solid var(--overview-dark-line); padding-left: 2rem; }
.terminal-metrics dl { margin: 1.5rem 0; }
.terminal-metrics dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.terminal-metrics dt { color: var(--overview-quiet); }
.terminal-metrics dd { margin: 0; white-space: nowrap; }
.newton { border-top: 1px solid var(--overview-dark-line); padding-top: 1rem; font-size: .7rem; }
.newton > p:first-child { color: var(--overview-quiet); }
.newton .micro { display: block; color: var(--overview-quiet); margin-top: 1rem; font-size: .6rem; }
.overview-footer { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--overview-dark-line); font-size: .7rem; color: var(--overview-quiet); }
@media (max-width: 1023px) { .overview-nav > .micro { display: none; } .discovery-detail { display: none; } .discovery-arrow { margin-left: auto; } .art-copy h2 { font-size: 3.2rem; } .art-stage { height: 500px; } }
@media (max-width: 767px) {
  .wordmark { font-size: clamp(2.4rem, 12vw, 3.25rem); }
  .discovery { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .5rem; }
  .discovery-index { display: none; }
  .discovery-label { grid-column: 1; }
  .discovery-arrow { grid-column: 2; grid-row: 1; width: 28px; height: 28px; }
  .discovery-label { font-size: .9rem; }
  .overview-nav { flex-wrap: wrap; gap: .8rem; }
  .overview-nav > div { gap: 1rem; }
  .overview-nav > div a { font-size: .7rem; }
  .overview-signature { font-size: 1.8rem; }
  .section-rail > .micro:last-child { font-size: .5rem; }
  .editorial-title { font-size: clamp(3.15rem, 12vw, 5.7rem); }
  .proofs > div { padding-right: .65rem; }
  .proofs > div + div { padding-left: .65rem; }
  .proofs dd { font-size: clamp(2.8rem, 12vw, 5rem); }
  .proofs dt { font-size: .7rem; line-height: 1.4; }
  .proofs p { font-size: .65rem; line-height: 1.4; }
  .art-copy { padding-right: 0; }
  .art-copy h2 { font-size: 3.5rem; }
  .art-formula { margin-top: 1.5rem; }
  .art-stage { height: 480px; margin-top: 2rem; }
  .art-control { width: 100%; }
  .range-foot > .micro { font-size: .5rem; }
  .constellation-facet { min-height: 6.18rem; padding: 1rem; }
  .constellation-facets { --facet-type: 1.1rem; }
  .hybrid-splash { margin-bottom: -2rem; }
  .constellation { min-height: 340px; }
  .constellation button { font-size: .75rem; padding: .65rem; }
  .constellation button:nth-of-type(1) { left: 2%; }
  .constellation button:nth-of-type(3) { left: 2%; }
  .constellation button:nth-of-type(odd) { max-width: 46%; font-size: .65rem; }
  .constellation button:nth-of-type(even) { font-size: 1.052rem; }
  .activity-detail > p { min-height: 0; }
  .project-list { grid-template-columns: minmax(0, 1fr); }
  .project-monogram { font-size: 8rem; }
  .contact-section .editorial-title { font-size: 3.6rem; }
  #contact-form .l-form-row { gap: 1.5rem; }
  #contact-form textarea { min-height: 11rem; }
  .form-footer { align-items: flex-start; }
  .terminal-metrics { border-left: 0; border-top: 1px solid var(--overview-dark-line); padding: 1.5rem 0 0; }
  .terminal-console { font-size: .7rem; }
  .terminal-help { font-size: .6rem; }
  .terminal-metrics { font-size: .7rem; }
  .overview-footer > .micro { display: none; }
}