/* =====================================================================
   vision.css — A reading in three registers
   Dark literary-essay treatment. Single narrow column, generous breath.
   Type carries the page. Almost no chrome. One red.
   Pure typography + background. No images, no SVG, no borders-for-show.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
.vision,
.vision__contact {
  --night:        #0b090e;     /* cool near-black with the faintest magenta hint */
  --night-deep:   #050308;
  --paper:        #ece4ea;     /* cool cream, very subtle pink */
  --paper-bright: #fbf5f8;
  --paper-mute:   #968290;
  --paper-quiet:  #5a4e58;
  --red:          #ff1493;     /* deeppink — Yuxiang's theme color */
  --red-bright:   #ff5cb0;     /* a touch lighter for hover / bright moments */
  --red-glow:     rgba(255, 20, 147, 0.32);
  --rule:         rgba(255, 20, 147, 0.18);
  --rule-soft:    rgba(255, 20, 147, 0.08);

  --serif:        "Charter", "Iowan Old Style", "Sitka", "Sitka Text", Georgia, "Times New Roman", serif;
  --serif-sc:     "Charter", Georgia, serif;
  --serif-poetic: "Baskervville", "Charter", Georgia, serif;
  --mono:         "IBM Plex Mono", "Anonymous Pro", Menlo, monospace;
}

/* ---------------------------------------------------------------------
   2. Page ground — dark warm paper, edge to edge
   --------------------------------------------------------------------- */
html:has(.bodyvision),
html:has(.vision) {
  background: #0b090e;
}

body.bodyvision,
body:has(.vision) {
  background: var(--night);
  color: var(--paper);
  font-family: var(--serif);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first last;
  /* faintest possible warm vignette — paper edge fall-off */
  background-image:
    radial-gradient(ellipse 110% 80% at 50% 30%, transparent 55%, rgba(0,0,0,0.35) 100%);
  background-attachment: fixed;
  margin: 0;
}

.vision,
.vision__contact {
  position: relative;
  z-index: 1;
}

/* Strip inherited backgrounds from the legacy chrome */
.vision.introsection,
.vision.intro-copy,
.vision__contact.introsection,
.vision__contact.cc-contact {
  background: transparent;
  padding: 0;
}

/* Defeat legacy .bio + .bio.intro-copy that wrapped this in a flex row
   with 8% left/right padding — and the large-screen .container.biocontainer
   max-width caps — both were squeezing the column. */
.bio.vision,
.bio.intro-copy.vision {
  display: block !important;
  flex-flow: initial !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  grid-column-gap: 0 !important;
  grid-row-gap: 0 !important;
}

.vision .container.biocontainer,
.vision .biocontainer {
  max-width: none !important;
  width: auto !important;
}

.vision .intro-wrap.vision__inner {
  max-width: none !important;
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   3a. Bio photo column — fixed at left edge, full viewport height
   --------------------------------------------------------------------- */
.intro-photo-col {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(280px, 28vw, 460px);
  height: 100vh;
  z-index: 2;
  pointer-events: none;          /* doesn't block text selection */
  overflow: hidden;
  background: var(--night-deep);
  /* soft right-edge fade into the page so the photo dissolves rather than
     forming a hard column. Pure CSS gradient mask. */
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.85) 88%,
    rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0.85) 88%,
    rgba(0,0,0,0) 100%);
}

.intro-photo-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* no filter — full brightness, full saturation, full opacity at all times */
}

/* ---------------------------------------------------------------------
   3. Layout container — wide left margin, narrow column
   --------------------------------------------------------------------- */
.vision .container,
.vision .biocontainer {
  max-width: none;
  margin: 0;
  padding:
    clamp(4rem, 10vh, 8rem)
    clamp(1.5rem, 6vw, 4rem)
    clamp(4rem, 9vh, 7rem)
    calc(clamp(280px, 28vw, 460px) + clamp(1.5rem, 4vw, 4rem));
}

.vision__inner,
.vision .intro-wrap.vision__inner {
  display: block;
  position: relative;
  width: 100%;
  /* no max-width — inner fills the container.
     Reading width is enforced per-element via max-width on prose blocks. */
  font-size: inherit;
  line-height: inherit;
  padding-top: 0;
}

.vision .intro-wrap > img.image-7 { display: none; }

/* ---------------------------------------------------------------------
   4. Lightbox trigger — a quiet line of italic
   --------------------------------------------------------------------- */
.vision__lightbox-trigger {
  position: absolute;
  top: clamp(2rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--paper-mute);
  text-decoration: none;
  z-index: 5;
  letter-spacing: 0.005em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.05em;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.vision__lightbox-trigger:hover {
  color: var(--paper-bright);
  border-bottom-color: var(--red);
}

.vision__lightbox-label::before { content: "→ "; opacity: 0.55; }

.vision .visually-hidden,
.vision .text-block-2 {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   5. Masthead — small caps meta + huge italic title
   --------------------------------------------------------------------- */
.vision__masthead {
  margin: 0 0 clamp(3rem, 6vw, 5.5rem) 0;
  padding: 0;
  border: none;
  background: none;
}

.vision__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--paper-mute);
  margin: 0 0 2.5rem 0;
  text-transform: uppercase;
}

.vision__meta-label {
  color: var(--red);
  font-weight: 600;
}

.vision__meta-id {
  font-family: var(--mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--paper-mute);
}

.vision .name-text.vision__name {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  line-height: 1.02;
  color: var(--paper-bright);
  margin: 0 0 1.4rem 0;
  letter-spacing: -0.024em;
  text-transform: none;
  text-align: left;
}

/* Leitmotif moments — Baskervville italic, the one ornate breath */
.vision__name em {
  font-family: var(--serif-poetic);
  font-style: italic;
  color: var(--red-bright);
  font-weight: 400;
  letter-spacing: -0.012em;
}

.vision__byline {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--paper-mute);
  letter-spacing: 0.24em;
  margin: 0;
}

/* ---------------------------------------------------------------------
   6. Signature — the opening declaration, set large
   --------------------------------------------------------------------- */
.vision .bio-text.vision__signature {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.35rem, 2.05vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--paper-bright);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0;
  text-align: left;
  text-transform: none;
  text-indent: 0;
}

.vision__signature em {
  font-style: italic;
  color: var(--paper-bright);
  font-weight: 400;
}

.vision__signature a.introlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  padding-bottom: 0.04em;
  transition: color 0.4s ease, border-color 0.4s ease, text-shadow 0.4s ease;
}

.vision__signature a.introlink:hover {
  color: var(--red-bright);
  border-bottom-color: var(--red-bright);
  /* glow removed */
}

/* ---------------------------------------------------------------------
   7. Throughline — drop cap paragraph, the chapter opening
   --------------------------------------------------------------------- */
.vision__throughline {
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  padding: 0;
  background: none;
  border: none;
  max-width: none;
}

.vision__throughline::before {
  content: "";
  display: none;
}

.vision__throughline-text {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.12rem, 1.45vw, 1.28rem);
  line-height: 1.75;
  color: var(--paper);
  margin: 0;
  text-align: left;
  text-indent: 0;
}

/* Drop cap removed — Summer Eternal essays don't use them, and at this
   theme contrast the ornate moment piles into the deeppink halo. */
.vision__throughline-text::first-letter {
  font-family: inherit;
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-shadow: none;
}

.vision__throughline-text em {
  font-style: italic;
  color: var(--paper-bright);
  font-weight: 400;
}

/* THE leitmotif — Baskervville italic, deeppink, no glow. */
.vision__leitmotif {
  font-family: var(--serif-poetic);
  font-style: italic;
  font-weight: 400;
  color: var(--red-bright);
  background: none;
  border: none;
  box-shadow: none;
  transform: none;
  padding: 0;
  margin: 0;
  letter-spacing: -0.008em;
  transition: color 0.5s ease;
}

.vision__leitmotif:hover {
  color: #ff85c4;
}

/* ---------------------------------------------------------------------
   8. Three prong sections — roman-numbered chapters
   --------------------------------------------------------------------- */
.vision__prong {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0;
  border: none;
  background: none;
  box-shadow: none;
  transform: none !important;
  position: relative;
}

.vision__prong--i,
.vision__prong--ii,
.vision__prong--iii {
  background: none;
  box-shadow: none;
  transform: none;
}

.vision__prong::before,
.vision__prong::after {
  content: none;
}

.vision__margin {
  display: block;
  border-right: none;
  padding: 0;
  margin: 0 0 1.4rem 0;
}

.vision__numeral {
  display: block;
  font-family: var(--serif-poetic);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 0.95;
  color: var(--red);
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 0.4rem 0;
}

.vision__numeral::before {
  content: "§ ";
  color: var(--paper-quiet);
  font-weight: 400;
  font-size: 0.65em;
  font-style: italic;
  vertical-align: 0.25em;
  letter-spacing: 0.05em;
}

.vision__numeral::after {
  content: ".";
  color: var(--red);
}

.vision__register {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  border: none;
  padding: 0;
  max-width: none;
  line-height: 1.4;
  margin: 0 0 0.4rem 0;
}

.vision__venues {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--paper-mute);
  line-height: 1.55;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.vision__venues::before {
  content: "venues // ";
  font-style: normal;
  font-family: var(--mono);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline;
  margin: 0;
}

.vision__prong-body {
  max-width: none;
}

.vision__prong-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  color: var(--paper-bright);
  margin: 0 0 1.1rem 0;
  letter-spacing: -0.012em;
  text-transform: none;
}

.vision__prong-title::before { content: none; }
.vision__prong-title::after  { content: none; }

.vision__prong-title em {
  font-style: italic;
  color: var(--red-bright);
  background: none;
  padding: 0;
  font-weight: 400;
}

.vision__prong-body p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.72;
  color: var(--paper);
  margin: 0;
}

/* ---------------------------------------------------------------------
   9. Substrate — a quiet aside paragraph, slightly indented
   --------------------------------------------------------------------- */
.vision__substrate {
  display: block;
  grid-template-columns: none;
  gap: 0;
  background: none;
  color: var(--paper);
  padding: 1.5rem 0 1.5rem 1.5rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0;
  border: none;
  border-left: 2px solid var(--red);
  box-shadow: none;
  position: relative;
}

.vision__substrate::before {
  content: "";
  display: none;
}

.vision__substrate-marker {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.8rem;
  padding: 0;
  border: none;
  background: none;
}

.vision__substrate-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.7;
  color: var(--paper);
  margin: 0;
  font-weight: 400;
  max-width: none;
}

.vision__formula {
  font-style: italic;
  color: var(--red-bright);
  font-weight: 400;
  background: none;
  white-space: normal;
}

/* ---------------------------------------------------------------------
   9b. Narrative — single flowing essay, replaces the prong layout
   --------------------------------------------------------------------- */
.vision__narrative {
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  padding: 0;
  border: none;
  background: none;
}

.vision__narrative p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.45vw, 1.28rem);
  line-height: 1.75;
  color: var(--paper);
  margin: 0 0 1.8rem 0;
}

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

.vision__narrative em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper-bright);
  font-weight: 400;
}

.vision__narrative a.introlink {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid var(--red);
  padding-bottom: 0.04em;
  background: none;
  transition: color 0.4s ease;
}

.vision__narrative a.introlink:hover {
  color: var(--red-bright);
}

/* ---------------------------------------------------------------------
   9c. Gallery — endless horizontal marquee of AI evaluations
   --------------------------------------------------------------------- */
.vision__gallery {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: 0;
}

.vision__gallery-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
  align-items: baseline;
  margin-bottom: 1.2rem;
  max-width: 56rem;
}

.vision__gallery-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.vision__gallery-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--paper-mute);
}

.vision__gallery-hint {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-left: 0.4em;
  white-space: nowrap;
  border: 1px solid var(--red);
  padding: 0.12rem 0.4rem;
}

.vision__gallery-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* edge fade so items slip in/out, never abrupt */
  mask-image: linear-gradient(90deg,
    transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 5%, black 95%, transparent 100%);
}

.vision__gallery-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  width: max-content;
  animation: vision-marquee 80s linear infinite;
}

.vision__gallery-viewport:hover .vision__gallery-track,
.vision__gallery-viewport:focus-within .vision__gallery-track {
  animation-play-state: paused;
}

@keyframes vision-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* -50% because the track contains the items duplicated; translating
     by half the track length puts us back to the visual start. */
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vision__gallery-track {
    animation: none;
  }
  .vision__gallery-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .vision__gallery-item {
    scroll-snap-align: start;
  }
}

.vision__gallery-item {
  flex: 0 0 auto;
  /* Per-item width — tuned so the *rendered* text size inside each
     screenshot looks visually similar across panels. Set via --item-w on
     a modifier class. Default falls back to a medium width. */
  width: var(--item-w, clamp(380px, 38vw, 680px));
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.vision__gallery-item--chatgpt {
  --item-w: clamp(420px, 42vw, 720px);
}
.vision__gallery-item--notion {
  --item-w: clamp(400px, 40vw, 690px);
}
.vision__gallery-item--claude-code {
  /* Claude Code terminal text is smaller relative to image width —
     render this slot wider so text scales up to match the others. */
  --item-w: clamp(520px, 52vw, 900px);
}

.vision__gallery-source {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-mute);
  display: block;
}

.vision__gallery-image {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--red);
  outline: 5px solid rgba(255, 20, 147, 0.08);
  outline-offset: 0;
  background: var(--night-deep);
  user-select: none;
  -webkit-user-drag: none;
}

/* Text-variant gallery item — for AI evaluations rendered inline rather
   than as a screenshot (e.g. Claude). Same frame language as image items. */
.vision__gallery-item--text .vision__gallery-text {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border: 1px solid var(--red);
  outline: 5px solid rgba(255, 20, 147, 0.08);
  background: var(--night-deep);
  padding: 1.3rem 1.4rem 1.4rem;
  min-height: 100%;
}

.vision__gallery-text-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(236, 226, 200, 0.18);
}

.vision__gallery-text-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: #d97757;  /* Claude orange — the one non-deeppink chrome accent */
  color: #1a0f08;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.vision__gallery-text-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--paper-bright);
  letter-spacing: 0;
}

.vision__gallery-text-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.vision__gallery-text-body p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--paper);
  margin: 0;
}

.vision__gallery-text-body em {
  font-style: italic;
  color: var(--red-bright);
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   10. Coda — flowing prose (legacy, kept for cascade safety)
   --------------------------------------------------------------------- */
.vision__coda {
  max-width: none;
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  padding: 0;
  border: none;
  background: none;
}

.vision__coda p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.75;
  color: var(--paper);
  margin: 0 0 1.4rem 0;
}

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

.vision__coda em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper-bright);
  font-weight: 400;
}

.vision__coda a.introlink {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid var(--red);
  padding-bottom: 0.04em;
  background: none;
  transition: color 0.4s ease;
}

.vision__coda a.introlink:hover {
  color: var(--red-bright);
  background: none;
}

/* Leave-note — a single italic word that hangs differently */
.vision__coda .leave-message-button,
.vision__leave-note,
.vision__coda .vision__leave-note {
  display: inline;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  color: var(--red-bright);
  background: none;
  border: none;
  border-bottom: 1px solid var(--red);
  padding: 0 0.04em;
  margin: 0;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.4s ease;
  vertical-align: baseline;
  text-transform: none;
  letter-spacing: 0.005em;
}

.vision__leave-note:hover {
  color: var(--paper-bright);
  background: none;
  transform: none;
  box-shadow: none;
}

.vision__leave-note::before,
.vision__leave-note::after { content: none; }

/* ---------------------------------------------------------------------
   11. Tech stack — quiet enumerated list, no chrome
   --------------------------------------------------------------------- */
.vision__stack {
  margin: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem) 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  position: relative;
}

.vision__stack::before { content: none; }

.vision__stack-title {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.6rem 0;
  padding-bottom: 0;
  border-bottom: none;
}

.vision__stack-title::before { content: none; }
.vision__stack-title::after  { content: none; }

.vision__stack-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  counter-reset: stack;
}

.vision__stack-row {
  display: block;
  grid-template-columns: none;
  gap: 0.2rem;
  align-items: baseline;
  padding-bottom: 0;
  border-bottom: none;
  font-family: var(--serif);
  counter-increment: stack;
  position: relative;
  padding-left: 2rem;
}

.vision__stack-row:last-child { border-bottom: none; }

.vision__stack-row::before {
  content: counter(stack, lower-roman) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--serif-poetic);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--red);
  letter-spacing: 0;
  align-self: baseline;
}

.vision__stack-row dt {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--paper-bright);
  margin: 0 0 0.15rem 0;
  line-height: 1.4;
  text-transform: none;
}

.vision__stack-row dt::before { content: none; }

.vision__stack-row dd {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--paper);
  margin: 0;
}

/* ---------------------------------------------------------------------
   12. Doc links — quiet underline links
   --------------------------------------------------------------------- */
.vision .link-wrap.vision__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0 0;
  padding: 0;
}

.vision .doclink.vision__doc {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--paper-bright);
  text-decoration: none;
  padding: 0.15rem 0 0.2rem 0;
  border: none;
  border-bottom: 1px solid var(--red);
  background: none;
  box-shadow: none;
  text-transform: none;
  transition: color 0.4s ease;
}

.vision .doclink.vision__doc::before { content: none; }

.vision .doclink.vision__doc:hover {
  color: var(--red-bright);
  border-bottom-color: var(--red-bright);
  background: none;
  transform: none;
  box-shadow: none;
  /* glow removed */
}

/* ---------------------------------------------------------------------
   13. Footer — colophon line, italic, mute
   --------------------------------------------------------------------- */
.vision__footer {
  margin: clamp(4rem, 8vw, 6rem) 0 0 0;
  padding: 1.5rem 0 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--paper-mute);
  letter-spacing: 0.005em;
  display: block;
  gap: 0;
  line-height: 1.6;
}

.vision__colophon {
  display: block;
}

.vision__credit-link {
  color: var(--paper-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.vision__credit-link:hover {
  color: var(--red-bright);
  border-bottom-color: var(--red-bright);
}

/* Elements whose line-breaks are controlled by Pretext. Marker only;
   the actual max-width is applied inline by js/vision-pretext.js. */
[data-pretext="balance"] {
  text-wrap: balance; /* native fallback if Pretext fails to load */
}

[data-pretext-applied="balance"] {
  text-wrap: initial; /* once Pretext has set inline max-width, drop the
                          native fallback to avoid double-balancing */
}

/* Pretext-rendered lines (used by flow mode). Each line is its own block
   so width corresponds 1:1 to one rendered line. */
.pt-line {
  display: block;
  white-space: pre;
  text-wrap: initial;
}

/* ---------------------------------------------------------------------
   FUN MODE — toggle button + cursor-following photo
   --------------------------------------------------------------------- */
/* The photo itself is the toggle. */
.intro-photo-col[role="button"] {
  cursor: pointer;
  pointer-events: auto;  /* override the base `pointer-events: none` */
  outline: none;
}

.intro-photo-col[role="button"]:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: -4px;
}

/* No hover effect, no badge overlay. Photo stays at 100% always. */

/* When fun mode is on, the photo column detaches and follows the cursor.
   --cursor-x / --cursor-y come from vision-fun.js via inline style props. */
body.bodyvision--cursor-mode .intro-photo-col {
  width: 320px;
  height: 400px;
  top: 0;
  left: 0;
  transform: translate3d(var(--cursor-x, 50vw), var(--cursor-y, 50vh), 0);
  transition: width 0.4s ease, height 0.4s ease;
  /* Soft-edge mask all around so the photo looks "loose" not a hard rect */
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%
  );
  /* Tiny cursor-glow under the photo */
  box-shadow: 0 0 40px var(--red-glow);
}

body.bodyvision--cursor-mode .intro-photo-col img {
  /* keep photo at 100% in cursor mode too */
}

/* With photo gone from left edge, give body its space back. */
body.bodyvision--cursor-mode .vision .container,
body.bodyvision--cursor-mode .vision .biocontainer {
  padding-left: clamp(1.5rem, 6vw, 4rem);
  transition: padding-left 0.4s ease;
}
body.bodyvision--cursor-mode .vision__contact {
  padding-left: clamp(1.5rem, 6vw, 4rem);
  transition: padding-left 0.4s ease;
}

/* In fun mode, every flow-marked element drops the balance max-width so its
   clientWidth matches the full container width — that's how Pretext sees
   enough horizontal room to compute photo overlap and produce a per-line
   narrowing. Inline max-width from balance mode is overridden via !important.
   The em / a inside is flattened during flow; restored when toggled off. */
body.bodyvision--cursor-mode [data-pretext-flow="paragraph"],
body.bodyvision--cursor-mode [data-pretext-flow="active"] {
  text-wrap: initial;
  max-width: none !important;
}

body.bodyvision--cursor-mode [data-pretext-flow="active"] .pt-line {
  display: block;
  white-space: pre;
}

/* On mobile, fun mode is awkward (touch + photo banner above text).
   Disable cursor-mode transforms on small screens. */
@media (max-width: 639px) {
  body.bodyvision--cursor-mode .intro-photo-col {
    position: relative;
    transform: none;
    width: 100%;
    height: 50vh;
    box-shadow: none;
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  }
}

/* ---------------------------------------------------------------------
   14. Contact — continues the dark page, plain inputs
   --------------------------------------------------------------------- */
.vision__contact {
  padding:
    clamp(4rem, 8vh, 7rem)
    clamp(1.5rem, 6vw, 4rem)
    clamp(4rem, 9vh, 7rem)
    calc(clamp(280px, 28vw, 460px) + clamp(1.5rem, 4vw, 4rem));
  margin: 0;
  border-top: 1px solid var(--rule);
  background: var(--night-deep);
  color: var(--paper);
  position: relative;
}

.vision__contact::before {
  content: none;
}

.vision__contact .container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.vision__contact .contact {
  display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: start;
}

.vision__contact .contact-headline {
  margin-bottom: 2.5rem;
}

.vision__contact .contact-headline::before {
  content: "Letters";
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.vision__contact .contact-headline h3 {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--paper-bright);
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.015em;
  text-transform: none;
}

.vision__contact .contact-headline .paragraph-light {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  line-height: 1.65;
  color: var(--paper-mute);
  max-width: 32rem;
  margin: 0;
}

.vision__contact-form,
.vision__contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.vision__contact-grid,
.vision__contact .contact-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.vision__field {
  padding: 1.3rem 0 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.vision__field:first-of-type {
  border-top: 1px solid var(--rule);
}

.vision__field label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--paper-mute);
  margin: 0;
  text-transform: uppercase;
}

.vision__field label::before { content: none; }
.vision__field label::after  { content: none; }

.vision__field .text-field,
.vision__field input.text-field,
.vision__field textarea.text-field {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--paper-bright);
  outline: none;
  width: 100%;
  min-height: auto;
  caret-color: var(--red);
}

.vision__field textarea.text-field {
  min-height: 5rem;
  resize: vertical;
}

.vision__field .text-field::placeholder {
  color: var(--paper-quiet);
  font-style: italic;
  font-family: var(--serif);
}

.vision__field .text-field:focus {
  background: transparent;
}

.vision__submit,
.vision__contact input.button.vision__submit {
  display: inline-block;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--red);
  padding: 0.4rem 0;
  margin: 2.5rem 0 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--red-bright);
  cursor: pointer;
  width: auto;
  text-align: left;
  align-self: flex-start;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.4s ease;
}

.vision__submit:hover {
  color: var(--red-bright);
  border-bottom-color: var(--red-bright);
  background: transparent;
  transform: none;
  box-shadow: none;
  /* glow removed */
}

.vision__contact .status-message {
  background: transparent;
  padding: 1rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--paper-mute);
  border: none;
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   15. Selection
   --------------------------------------------------------------------- */
.vision ::selection,
.vision__contact ::selection {
  background: var(--red);
  color: var(--paper-bright);
}

/* ---------------------------------------------------------------------
   16. Reduced motion — already gentle; ensure nothing breaks
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

/* ---------------------------------------------------------------------
   17. Navigation chrome adapted for the dark theme
   --------------------------------------------------------------------- */
body.bodyvision,
body:has(.vision) {
  /* belt + braces: kill any inherited bg */
  background-color: var(--night) !important;
}

body.bodyvision .navigation,
body:has(.vision) .navigation {
  background: transparent;
}

body.bodyvision .nav-projects,
body:has(.vision) .nav-projects {
  color: var(--paper-mute);
  font-family: var(--serif-sc);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  transition: color 0.4s ease;
}

body.bodyvision .nav-projects:hover,
body:has(.vision) .nav-projects:hover {
  color: var(--red-bright);
}

/* Logo + menu icon are light-on-transparent gifs — invert to read on dark. */
body.bodyvision .logo-image,
body:has(.vision) .logo-image,
body.bodyvision .menu-icon,
body:has(.vision) .menu-icon {
  filter: invert(0.92) sepia(0.15) saturate(0.7) brightness(1.05);
  mix-blend-mode: screen;
}

/* Override the nav-link underline styles from yuxiang.webflow.css */
body.bodyvision .w-nav-link.w--current,
body:has(.vision) .w-nav-link.w--current {
  color: var(--red-bright);
}

/* Mobile menu panel (when expanded) — dark background */
body.bodyvision .w-nav-overlay,
body:has(.vision) .w-nav-overlay,
body.bodyvision .w-nav-menu.w--open,
body:has(.vision) .w-nav-menu.w--open {
  background: var(--night-deep);
  color: var(--paper);
}

/* Form autofill (browser yellow) — re-paint to fit dark theme */
.vision__field input:-webkit-autofill,
.vision__field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--paper-bright);
  -webkit-box-shadow: 0 0 0px 1000px var(--night) inset;
  caret-color: var(--red);
  transition: background-color 9999s ease-in-out 0s;
}

/* Scrollbar — dark themed */
body.bodyvision,
body:has(.vision) {
  scrollbar-color: var(--paper-quiet) var(--night);
  scrollbar-width: thin;
}

body.bodyvision ::-webkit-scrollbar,
body:has(.vision) ::-webkit-scrollbar {
  width: 10px;
  background: var(--night);
}
body.bodyvision ::-webkit-scrollbar-thumb,
body:has(.vision) ::-webkit-scrollbar-thumb {
  background: var(--paper-quiet);
}
body.bodyvision ::-webkit-scrollbar-thumb:hover,
body:has(.vision) ::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* ---------------------------------------------------------------------
   18. Responsive — tablet
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  .intro-photo-col {
    width: clamp(220px, 30vw, 320px);
  }
  .vision .container,
  .vision .biocontainer {
    padding:
      clamp(3rem, 8vh, 5rem)
      clamp(1.25rem, 5vw, 2.5rem)
      clamp(3rem, 7vh, 5rem)
      calc(clamp(220px, 30vw, 320px) + clamp(1.25rem, 3vw, 2.5rem));
  }
  .vision__contact {
    padding:
      clamp(3rem, 6vh, 5rem)
      clamp(1.25rem, 5vw, 2.5rem)
      clamp(3rem, 7vh, 5rem)
      calc(clamp(220px, 30vw, 320px) + clamp(1.25rem, 3vw, 2.5rem));
  }
}

/* ---------------------------------------------------------------------
   19. Responsive — mobile
   --------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* On mobile the fixed photo column would eat too much width — collapse
     it to a banner across the top and let content flow below. */
  .intro-photo-col {
    position: relative;
    width: 100%;
    height: 50vh;
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 65%,
      rgba(0,0,0,0.7) 90%,
      rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 65%,
      rgba(0,0,0,0.7) 90%,
      rgba(0,0,0,0) 100%);
  }
  .vision .container,
  .vision .biocontainer {
    padding:
      3rem 1.25rem 3rem 1.25rem;
  }
  .vision__contact {
    padding:
      3rem 1.25rem 3rem 1.25rem;
  }
  .vision .name-text.vision__name {
    font-size: clamp(2rem, 9vw, 3rem);
  }
  .vision__signature {
    font-size: 1.1rem;
  }
  .vision__throughline-text::first-letter {
    font-size: 3.6rem;
    margin: 0.04em 0.08em 0 0;
  }
  .vision__lightbox-trigger {
    position: static;
    margin: 0 0 1.5rem 0;
    display: inline-block;
  }
  .vision__inner,
  .vision .intro-wrap.vision__inner,
  .vision__contact .container {
    max-width: 100%;
  }
}