@import url("https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap");

:root {
  --paper: #f4f0e6;
  --ink: #11110f;
  --muted: rgba(17,17,15,.42);
  --red: #e12620;
  --pad: clamp(22px, 3.5vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.025) 0 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 65%, rgba(0,0,0,.018) 0 .8px, transparent 1px) 0 0 / 29px 29px,
    var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }
.brand, .page-index {
  position: absolute;
  top: var(--pad);
  z-index: 10;
  font-family: "Courier New", Consolas, monospace;
  letter-spacing: .08em;
  font-size: clamp(15px, 1.1vw, 21px);
}
.brand { left: var(--pad); }
.page-index { right: var(--pad); }

/* PAGE 01 */
.threshold-page { overflow: hidden; }
.threshold {
  position: relative;
  min-height: 100svh;
  padding: var(--pad);
}
.threshold-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.threshold-line, .combined-line {
  position: absolute;
  width: min(90vw, 1200px);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: clamp(30px, 5.4vw, 88px);
  font-weight: 300;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 850ms ease, transform 900ms ease, filter 1100ms ease;
}
.threshold-line.visible, .combined-line.visible { opacity: 1; transform: translateY(0); }
.threshold-line.fading { opacity: .12; filter: blur(4px); }
.threshold-line.line-a.drop-below {
  transform: translateY(clamp(58px, 6.6vw, 108px));
  filter: none;
}
.ghost-word { filter: blur(2.2px); opacity: .62; }
.combined-line { display: flex; flex-direction: column; gap: .22em; }
.combined-second {
  font-size: 1em;
  letter-spacing: .24em;
  opacity: 1;
}
.encounter-link, .machine-link {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  font-family: "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  font-size: clamp(11px, .8vw, 14px);
}
.encounter-link {
  left: 50%;
  bottom: clamp(65px, 10vh, 120px);
  transform: translateX(-50%);
  padding: 10px 14px;
}
.machine-link { right: var(--pad); bottom: var(--pad); }
.encounter-link.visible, .machine-link.visible { opacity: 1; }
.encounter-link:hover, .machine-link:hover, .axis-nav a:hover { opacity: .55; }

/* PAGE 02 */
.axis-page { min-height: 100svh; }
.axis-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 33.5vw) 1fr;
}
.hyperpop-panel {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  z-index: 2;
  clip-path: polygon(
    0 0, 97.6% 0, 99.5% 2.5%, 97.8% 5.2%, 99.2% 8.5%, 97.6% 12%, 99.4% 15.5%, 97.9% 19%,
    99.2% 22.2%, 97.4% 26%, 99.6% 30%, 97.8% 34%, 99.3% 38%, 97.5% 42%, 99.5% 46%, 97.7% 50%,
    99.3% 54%, 97.4% 58%, 99.6% 62%, 97.9% 66%, 99.4% 70%, 97.5% 74%, 99.2% 78%, 97.8% 82%,
    99.5% 86%, 97.6% 90%, 99.4% 94%, 97.8% 97%, 99.1% 100%, 0 100%
  );
  background: #ffb1e7;
}
.hyperpop-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.axis-field {
  min-height: 100svh;
  position: relative;
  padding: var(--pad);
  padding-left: clamp(48px, 5vw, 92px);
  overflow: hidden;
}
.axis-header { margin-top: clamp(92px, 12vh, 140px); }
.axis-header h1 {
  margin: 0;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .23em;
  font-size: clamp(30px, 4vw, 68px);
  white-space: nowrap;
}
.axis-header h1 span { filter: blur(2.6px); opacity: .55; }
.formula-cluster {
  margin-top: clamp(38px, 5vh, 68px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vh, 22px);
}
.formula {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 180ms ease;
}
.formula:hover, .formula:focus-visible, .formula.active { opacity: .58; outline: none; }
.math {
  font-family: "Times New Roman", Cambria, Georgia, serif;
  font-size: clamp(23px, 2.15vw, 39px);
  line-height: 1.2;
  letter-spacing: .01em;
}
.red { color: var(--red); }
.response-zone {
  position: absolute;
  left: clamp(48px, 5vw, 92px);
  right: clamp(265px, 24vw, 380px);
  bottom: clamp(80px, 9vh, 120px);
  height: clamp(230px, 33vh, 350px);
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: center;
}
.big-bracket {
  height: 100%;
  position: relative;
  opacity: .25;
  transition: opacity 220ms ease;
}
.response-zone.active .big-bracket { opacity: .85; }
.big-bracket::before, .big-bracket::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: currentColor;
}
.bracket-left { border-left: 1px solid currentColor; }
.bracket-left::before { top: 0; left: 0; }
.bracket-left::after { bottom: 0; left: 0; }
.bracket-right { border-right: 1px solid currentColor; }
.bracket-right::before { top: 0; right: 0; }
.bracket-right::after { bottom: 0; right: 0; }
.response-text {
  font-family: "Cascadia Code", "Courier New", Consolas, monospace;
  font-size: clamp(13px, 1.13vw, 19px);
  line-height: 1.65;
  letter-spacing: .02em;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: 780px;
}
.response-zone.active .response-text { opacity: 1; transform: translateY(0); }
.axis-nav {
  position: absolute;
  right: var(--pad);
  bottom: clamp(120px, 16vh, 175px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(9px, .67vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.axis-nav a::before { content: "—"; margin-right: 18px; opacity: .55; }
.axis-machine { opacity: 1; }

/* MACHINE STUB */
.machine-stub { min-height: 100svh; position: relative; padding: var(--pad); }
.machine-stub-content {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: "Courier New", Consolas, monospace;
  letter-spacing: .13em; line-height: 2; font-size: clamp(12px, 1vw, 16px);
  text-align: center;
}
.machine-status { opacity: .42; }

@media (max-width: 900px) {
  .threshold-line, .combined-line { letter-spacing: .15em; padding: 0 20px; }
  .axis-shell { grid-template-columns: 1fr; }
  .hyperpop-panel {
    min-height: 0; height: 31svh;
    clip-path: polygon(0 0,100% 0,100% 94%,96% 96%,91% 94%,86% 97%,80% 95%,75% 98%,69% 95%,63% 97%,57% 94%,50% 98%,44% 95%,38% 97%,32% 94%,26% 98%,19% 95%,12% 97%,6% 94%,0 97%);
  }
  .hyperpop-panel img { object-position: center 47%; }
  .axis-field { min-height: 69svh; padding: 28px 24px 34px; overflow: visible; }
  .axis-field .brand, .axis-field .page-index { top: 28px; }
  .axis-field .brand { left: 24px; }
  .axis-field .page-index { right: 24px; }
  .axis-header { margin-top: 68px; }
  .axis-header h1 { white-space: normal; font-size: clamp(27px, 8.5vw, 44px); line-height: 1.2; }
  .formula-cluster { margin-top: 30px; gap: 16px; }
  .math { font-size: clamp(20px, 5.2vw, 29px); }
  .response-zone {
    position: relative; left: auto; right: auto; bottom: auto;
    margin-top: 38px; height: 270px; width: 100%;
    grid-template-columns: 17px 1fr 17px; gap: 16px;
  }
  .response-text { font-size: 13px; line-height: 1.55; }
  .axis-nav {
    position: relative; right: auto; bottom: auto; margin-top: 34px;
    font-size: 10px; gap: 10px; padding-bottom: 64px;
  }
  .axis-machine { position: absolute; right: 24px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* === v0.2 PAGE 02 REFINEMENT ===
   Page 01 intentionally unchanged. This block overrides Page 02 only. */
@media (min-width: 901px) {
  .axis-shell { grid-template-columns: minmax(300px, 33.5vw) 1fr; }

  .axis-field {
    padding: 0 clamp(34px, 2.2vw, 48px);
    overflow: hidden;
  }

  .axis-field .brand {
    left: clamp(34px, 2.2vw, 48px);
    top: clamp(24px, 3.1vh, 38px);
  }

  .axis-field .page-index {
    right: clamp(34px, 2.2vw, 48px);
    top: clamp(24px, 3.1vh, 38px);
  }

  .axis-header {
    margin-top: clamp(48px, 5.5vh, 66px);
  }

  .axis-header h1 {
    font-size: clamp(48px, 4.25vw, 78px);
    letter-spacing: .205em;
    line-height: 1.05;
  }

  .axis-header h1 span {
    filter: blur(4px);
    opacity: .47;
  }

  .formula-cluster {
    margin-top: clamp(34px, 4.2vh, 48px);
    gap: clamp(8px, 1.05vh, 12px);
  }

  .formula { opacity: .86; }
  .formula:hover, .formula:focus-visible, .formula.active {
    opacity: 1;
  }

  .math {
    font-size: clamp(17px, 1.22vw, 22px);
    line-height: 1.18;
  }

  .response-zone {
    left: clamp(34px, 2.2vw, 48px);
    right: clamp(320px, 21vw, 390px);
    bottom: auto;
    top: clamp(365px, 43vh, 410px);
    height: clamp(205px, 25vh, 235px);
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: clamp(22px, 2vw, 36px);
    align-items: center;
  }

  .big-bracket {
    opacity: 0;
    transition: opacity 190ms ease;
  }
  .response-zone.active .big-bracket { opacity: .72; }
  .big-bracket::before, .big-bracket::after {
    width: 30px;
    height: 1px;
  }
  .bracket-left { border-left-width: 1px; }
  .bracket-right { border-right-width: 1px; }

  .response-text {
    max-width: 820px;
    font-family: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: clamp(16px, 1.34vw, 24px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: .01em;
    transform: translateY(3px);
  }

  .axis-nav {
    right: clamp(52px, 4.2vw, 82px);
    bottom: clamp(145px, 18vh, 190px);
    gap: 8px;
    font-size: clamp(9px, .63vw, 11px);
    background: transparent;
  }

  .axis-machine {
    right: clamp(52px, 4.2vw, 82px);
    bottom: clamp(44px, 5.5vh, 62px);
  }
}

@media (max-width: 900px) {
  /* On touch screens the explanation is revealed by tapping a formula. */
  .big-bracket { opacity: 0; }
  .response-zone.active .big-bracket { opacity: .7; }
  .formula { opacity: .86; }
  .formula.active { opacity: 1; }
}

/* === v0.2.1 DESKTOP VIEWPORT FIT ===
   Page 01 remains unchanged. Page 02 now behaves as a single-screen composition
   on desktop/laptop displays, including shorter browser viewports. */
@media (min-width: 901px) {
  html, body.axis-page { height: 100%; }
  body.axis-page { overflow: hidden; }

  .axis-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .hyperpop-panel,
  .axis-field {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  .hyperpop-panel img {
    height: 100%;
    min-height: 0;
  }

  .axis-field {
    overflow: hidden;
  }

  .axis-field .brand,
  .axis-field .page-index {
    top: clamp(16px, 3vh, 34px);
  }

  .axis-header {
    margin-top: clamp(38px, 7.2vh, 64px);
  }

  .axis-header h1 {
    font-size: clamp(38px, min(4.25vw, 7.7vh), 78px);
  }

  .formula-cluster {
    margin-top: clamp(18px, 4.1vh, 42px);
    gap: clamp(6px, 1.15vh, 11px);
  }

  .math {
    font-size: clamp(15px, min(1.22vw, 2.65vh), 22px);
  }

  .response-zone {
    top: 42vh;
    top: 42dvh;
    height: 28vh;
    height: 28dvh;
    min-height: 155px;
    max-height: 245px;
  }

  .response-text {
    font-size: clamp(13px, min(1.34vw, 2.45vh), 24px);
    line-height: 1.38;
  }

  .axis-nav {
    bottom: clamp(72px, 14vh, 155px);
    gap: clamp(4px, .8vh, 8px);
    font-size: clamp(8px, min(.63vw, 1.35vh), 11px);
  }

  .axis-machine {
    bottom: clamp(20px, 4vh, 44px);
  }
}


/* === v0.2.2 PAGE 02 DESIGN PASS ===
   Latest Paint mock-up is the visual master. Page 01 remains untouched. */
@media (min-width: 901px) {
  .axis-shell { grid-template-columns: minmax(300px, 32vw) 1fr; }

  /* Preserve the top of the collage (especially Mona Lisa); crop at bottom. */
  .hyperpop-panel img { object-position: center top; }

  .axis-field { padding-left: clamp(38px, 2.65vw, 52px); }
  .axis-field .brand { left: clamp(38px, 2.65vw, 52px); }

  .axis-header { margin-top: clamp(46px, 7.0vh, 66px); }
  .axis-header h1.axis-title {
    display: flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    line-height: .95;
  }

  .iterative-word {
    display: inline-flex;
    align-items: baseline;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(58px, min(5.8vw, 10.2vh), 104px);
    letter-spacing: .065em;
  }
  .iterative-word > span {
    opacity: 0;
    transform: translateY(3px);
    filter: blur(2px);
    transition: opacity 180ms ease, transform 220ms ease, filter 240ms ease;
  }
  .iterative-word > span.resolved { opacity: 1; transform: none; filter: none; }
  .iterative-word .word-gap { margin-left: .34em; }

  .axis-divider {
    width: 1px;
    height: clamp(72px, 11.5vh, 112px);
    margin: 0 clamp(14px, 1.25vw, 24px) 0 clamp(12px, 1vw, 20px);
    background: rgba(17,17,15,.42);
    opacity: 0;
    transform: scaleY(.25);
    transition: opacity 320ms ease, transform 420ms ease;
  }
  .axis-divider.resolved { opacity: 1; transform: scaleY(1); }

  .axis-word {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(54px, min(5.45vw, 9.6vh), 98px);
    letter-spacing: .19em;
    color: rgba(17,17,15,.55);
    opacity: 0;
    filter: blur(12px);
    transform: translateX(-5px);
    transition: opacity 650ms ease, filter 750ms ease, transform 700ms ease;
  }
  .axis-word.resolved { opacity: .62; filter: blur(5px); transform: none; }

  .formula-cluster {
    margin-top: clamp(46px, 6.7vh, 66px);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 520ms ease, transform 520ms ease;
  }
  .formula-cluster.resolved { opacity: 1; transform: none; }

  .math { font-size: clamp(14px, min(1.08vw, 2.3vh), 20px); }

  /* Give Phi and the opening parenthesis room to breathe. */
  .formula:first-child .red:first-of-type { margin-right: .13em; }

  .response-zone {
    left: clamp(50px, 3.3vw, 66px);
    right: clamp(330px, 22.5vw, 420px);
    top: 55vh;
    top: 55dvh;
    height: 31vh;
    height: 31dvh;
    min-height: 180px;
    max-height: 275px;
    grid-template-columns: 36px minmax(0,1fr) 36px;
    gap: clamp(28px, 2.5vw, 44px);
  }
  .big-bracket { color: rgba(17,17,15,.74); }
  .response-zone.active .big-bracket { opacity: .72; }
  .big-bracket::before, .big-bracket::after { width: 34px; }

  .response-text {
    max-width: 760px;
    font-size: clamp(13px, min(1.08vw, 2.05vh), 19px);
    font-weight: 300;
    line-height: 1.48;
    color: rgba(17,17,15,.78);
    padding: clamp(18px, 2.6vh, 28px) 0;
  }

  .axis-nav {
    right: clamp(52px, 4.2vw, 82px);
    bottom: clamp(46px, 7.2vh, 72px);
    gap: clamp(4px, .68vh, 7px);
    font-size: clamp(7.5px, min(.56vw, 1.15vh), 10px);
  }
  .axis-nav a::before { margin-right: 15px; }

  /* Machine access belongs to the threshold; keep Page 02 visually quiet for now. */
  .axis-machine { display: none; }
}

@media (max-width: 900px) {
  .axis-header h1.axis-title { display: flex; align-items: center; white-space: nowrap; }
  .iterative-word {
    display: inline-flex; align-items: baseline;
    font-family: Georgia, "Times New Roman", serif; font-style: italic;
    font-size: clamp(30px, 8.3vw, 46px); letter-spacing: .035em;
  }
  .iterative-word > span { opacity: 0; filter: blur(2px); transition: opacity 160ms ease, filter 200ms ease; }
  .iterative-word > span.resolved { opacity: 1; filter: none; }
  .iterative-word .word-gap { margin-left: .3em; }
  .axis-divider { width:1px; height: clamp(36px, 10vw, 52px); margin: 0 9px; background: rgba(17,17,15,.4); opacity:0; transition:opacity 300ms ease; }
  .axis-divider.resolved { opacity:1; }
  .axis-word { font-family: Arial,Helvetica,sans-serif; font-size: clamp(28px,7.4vw,42px); font-weight:300; letter-spacing:.13em; opacity:0; filter:blur(8px); transition:opacity 550ms ease, filter 650ms ease; }
  .axis-word.resolved { opacity:.58; filter:blur(3px); }
  .formula-cluster { opacity:0; transform:translateY(3px); transition:opacity 450ms ease, transform 450ms ease; }
  .formula-cluster.resolved { opacity:1; transform:none; }
  .formula:first-child .red:first-of-type { margin-right:.12em; }
  .hyperpop-panel img { object-position:center top; }
  .response-text { font-weight:300; color:rgba(17,17,15,.8); }
}

/* === v0.2.3 FAITHFUL PAGE 02 TRANSCRIPTION ===
   Latest Paint mock-up (1664×900) is the desktop master.
   Page 01 is intentionally untouched. */
@media (min-width: 901px) {
  /* Master split: torn collage ends at c. 33.65% of viewport width. */
  .axis-shell { grid-template-columns: 33.65vw 1fr; }

  .axis-field {
    padding: 0;
  }

  /* Measured from the Paint master, expressed relative to the cream field. */
  .axis-field .brand {
    left: 4.08%;
    top: 4.25%;
  }
  .axis-field .page-index {
    right: 2.25%;
    top: 4.25%;
  }

  .axis-header {
    position: absolute;
    left: 11.4%;
    top: 6.0%;
    margin: 0;
  }
  .axis-header h1.axis-title {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: .95;
    white-space: nowrap;
  }

  /* Important: ONLY AXIS is blurred. The generic legacy span rule must not touch this. */
  .axis-header h1.axis-title > .iterative-word {
    filter: none !important;
    opacity: 1 !important;
    transform: none;
  }
  .axis-header h1.axis-title > .axis-divider {
    filter: none !important;
  }
  .axis-header h1.axis-title > .axis-word {
    opacity: 0;
  }
  .axis-header h1.axis-title > .axis-word.resolved {
    opacity: .58;
    filter: blur(5px);
  }

  .iterative-word {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(56px, min(5.45vw, 9.7vh), 98px);
    letter-spacing: .055em;
  }
  .iterative-word > span {
    opacity: 0;
    filter: none !important;
    transform: none;
    transition: opacity 120ms linear;
  }
  .iterative-word > span.resolved { opacity: 1; }
  .iterative-word .word-gap { margin-left: .33em; }

  .axis-divider {
    width: 1px;
    height: clamp(66px, 10.7vh, 96px);
    margin: 0 clamp(11px, .88vw, 17px) 0 clamp(10px, .78vw, 15px);
    background: rgba(17,17,15,.48);
    opacity: 0;
    transform: scaleY(.2);
    transform-origin: center;
    transition: opacity 280ms ease, transform 380ms ease;
  }
  .axis-divider.resolved { opacity: 1; transform: scaleY(1); }

  .axis-word {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(53px, min(5.1vw, 9.1vh), 92px);
    letter-spacing: .18em;
    color: rgba(17,17,15,.55);
    filter: blur(12px);
    transform: none;
    transition: opacity 1200ms ease, filter 1200ms ease;
  }

  .formula-cluster {
    position: absolute;
    left: 6.35%;
    top: 28.15%;
    margin: 0;
    gap: clamp(7px, 1.05vh, 10px);
    opacity: 0;
    transform: none;
    transition: opacity 500ms ease;
  }
  .formula-cluster.resolved { opacity: 1; }
  .math {
    font-size: clamp(14px, min(1.05vw, 2.18vh), 19px);
    line-height: 1.18;
  }
  .formula:first-child .red:first-of-type { margin-right: .18em; }

  .response-zone {
    left: 7.75%;
    right: 36.9%;
    top: 56.25%;
    height: 30.0%;
    min-height: 0;
    max-height: none;
    grid-template-columns: 36px minmax(0,1fr) 36px;
    gap: clamp(24px, 2.25vw, 38px);
  }
  .big-bracket { color: rgba(17,17,15,.72); }
  .response-zone.active .big-bracket { opacity: .70; }
  .big-bracket::before, .big-bracket::after { width: 34px; }
  .response-text {
    max-width: none;
    font-family: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: clamp(13px, min(1.03vw, 1.95vh), 18px);
    font-weight: 300;
    line-height: 1.48;
    color: rgba(17,17,15,.76);
    padding: 8% 0;
  }

  .axis-nav {
    right: 3.25%;
    bottom: 5.85%;
    gap: clamp(4px, .66vh, 6px);
    font-size: clamp(7.5px, min(.55vw, 1.1vh), 9.5px);
  }
  .axis-nav a::before { margin-right: 14px; }

  /* Keep top of collage sacred; any necessary crop comes off the bottom. */
  .hyperpop-panel img {
    object-fit: cover;
    object-position: center top;
  }
}

/* === v0.2.4 FINAL PAGE 02 MICRO-TWEAKS ===
   Five requested refinements only. Page 01 remains untouched. */
@media (min-width: 901px) {
  /* Restore the more elegant earlier italic feel. */
  .iterative-word {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
  }

  /* Make each character's arrival unmistakably discrete. */
  .iterative-word > span {
    transition: opacity 70ms linear !important;
  }

  /* Formulae: only fractionally larger and stronger. */
  .math {
    font-size: clamp(15px, min(1.12vw, 2.28vh), 21px);
    font-weight: 500;
  }

  /* Cascadia Code Light + Bold spirit: clearer, but not shouty. */
  .response-text {
    font-weight: 600;
    color: rgba(17,17,15,.82);
  }

  /* Navigation slightly larger while remaining peripheral. */
  .axis-nav {
    font-size: clamp(8.5px, min(.64vw, 1.28vh), 11.5px);
  }
}

@media (max-width: 900px) {
  .iterative-word {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  }
  .iterative-word > span { transition: opacity 70ms linear !important; }
  .math { font-size: clamp(21px, 5.45vw, 30px); font-weight: 500; }
  .response-text { font-weight: 600; color: rgba(17,17,15,.84); }
  .axis-nav { font-size: 11px; }
}

/* === v0.2.5 PAINT-MASTER ALIGNMENT ===
   Measured from Ian's 2048×951 Page 02 reference. Only the four requested
   desktop geometry changes are made here; interaction/copy/response field stay put. */
@media (min-width: 901px) {
  /* Heading: fractionally higher, a little larger, and shifted left to match master. */
  .axis-header {
    left: 9.75%;
    top: 4.85%;
  }
  .iterative-word {
    font-size: clamp(60px, min(5.72vw, 10.15vh), 103px);
  }
  .axis-divider {
    height: clamp(69px, 11.15vh, 101px);
  }
  .axis-word {
    font-size: clamp(57px, min(5.36vw, 9.55vh), 97px);
  }

  /* Formula block: slightly larger and aligned to the master reference. */
  .formula-cluster {
    left: 4.75%;
    top: 27.15%;
    gap: clamp(8px, 1.12vh, 11px);
  }
  .math {
    font-size: clamp(16px, min(1.18vw, 2.40vh), 22px);
  }

  /* Navigation: slightly larger and moved to the measured lower-right position. */
  .axis-nav {
    right: 3.95%;
    bottom: 7.05%;
    gap: clamp(4px, .69vh, 6px);
    font-size: clamp(9px, min(.69vw, 1.38vh), 12px);
  }
}

/* === v0.2.6 FINAL PAGE 02 ALIGNMENT ===
   Three requested corrections only: title alignment/scale/position and formula weight. */
@media (min-width: 901px) {
  /* Whole heading: a little larger and a little farther left. */
  .axis-header {
    left: 8.85%;
    top: 4.85%;
  }
  .iterative-word {
    font-size: clamp(63px, min(5.95vw, 10.55vh), 107px);
    /* Lift only the script phrase so its optical centre aligns with AXIS. */
    transform: translateY(-0.10em) !important;
  }
  .axis-divider {
    height: clamp(72px, 11.55vh, 105px);
  }
  .axis-word {
    font-size: clamp(60px, min(5.58vw, 9.95vh), 101px);
  }

  /* Keep geometry exactly as v0.2.5; add only a little typographic authority. */
  .math {
    font-weight: 600;
  }
}

/* === v0.2.7 IAN PAINT-MASTER FINAL MICRO-ALIGNMENT ===
   Uses homepage 2 web version(7) as the desktop geometry reference.
   Only: heading, formula emphasis/marker, and response-zone placement. */
@media (min-width: 901px) {
  /* Larger heading, shifted right to match Ian's reference. */
  .axis-header {
    left: 15.0%;
    top: 4.85%;
  }

  /* More calligraphic/script-like than the Palatino pass, while retaining
     the individual-letter animation spans. */
  .iterative-word {
    font-family: "Monotype Corsiva", "Segoe Script", "Lucida Calligraphy", "Palatino Linotype", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(68px, min(6.35vw, 11.55vh), 114px);
    letter-spacing: .035em;
    transform: translateY(-0.10em) !important;
  }
  .axis-divider {
    height: clamp(77px, 12.35vh, 112px);
  }
  .axis-word {
    font-size: clamp(65px, min(5.95vw, 10.75vh), 108px);
  }

  /* Formulae: tiny move right; retain current size/weight. */
  .formula-cluster {
    left: 5.45%;
  }

  /* Neat vertical red index line beside the three equations. */
  .formula-cluster::before {
    content: "";
    position: absolute;
    left: -12px;
    top: -16px;
    width: 3px;
    height: calc(100% + 32px);
    background: #e11f26;
    border-radius: 1px;
  }

  /* Fractional response-field reposition from Ian's final reference. */
  .response-zone {
    left: 8.9%;
    right: 35.7%;
    top: 56.0%;
  }
}

/* === v0.2.8 TITLE TYPOGRAPHY ONLY ===
   Ian: Palace-Script-like treatment; lower the script fractionally from v0.2.7.
   Keep letter-by-letter reveal and AXIS fade logic unchanged. */
@media (min-width: 901px) {
  .iterative-word {
    font-family: "Palace Script MT", "Palace Script", "Edwardian Script ITC", "Kunstler Script", "Monotype Corsiva", "Segoe Script", cursive;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .015em;
    transform: translateY(-0.045em) !important;
  }
}


/* === v0.2.9 IAN PAINT-MASTER — homepage 2 web version(8) ===
   Deliberately preserve the mixed-font grammar. Only the latest measured
   desktop adjustments: Kunstler title, heading geometry, formula weight,
   and response-field position. */
@media (min-width: 901px) {
  .axis-header {
    left: 10.8%;
    top: 2.25%;
  }

  .iterative-word {
    font-family: "Kunstler Script", "Künstler Script", "Palace Script MT", "Edwardian Script ITC", "Monotype Corsiva", cursive;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(78px, min(7.25vw, 13.1vh), 126px);
    letter-spacing: 0;
    line-height: .92;
    transform: translateY(0.015em) !important;
    filter: none !important;
    opacity: 1 !important;
    clip-path: inset(0 calc(100% - var(--reveal, 0%)) 0 0);
    transition: none !important;
  }
  .iterative-word.resolved {
    --reveal: 100%;
  }

  .axis-divider {
    height: clamp(86px, 13.9vh, 120px);
  }
  .axis-word {
    font-size: clamp(72px, min(6.7vw, 11.8vh), 116px);
  }

  /* The red rule now supplies the emphasis: return equations to a lighter,
     textbook-like weight while retaining their current size and placement. */
  .math {
    font-weight: 400;
  }
  .formula-cluster {
    left: 6.15%;
  }

  /* Fractional move to match Ian's latest bracket/text placement. */
  .response-zone {
    left: 8.2%;
    right: 36.0%;
    top: 48.4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iterative-word { --reveal: 100% !important; clip-path: none !important; }
}

/* === v0.3.0 HEADING-ONLY CONVERGENCE PASS ===
   Four requested changes only: larger/leftward whole heading, larger/bolder
   Kunstler script, faster letter reveal, slower AXIS fade. Everything else frozen. */
@media (min-width: 901px) {
  .axis-header {
    left: 7.6%;
    top: 2.25%;
  }

  .iterative-word {
    font-family: "Kunstler Script", "Künstler Script", "Palace Script MT", "Edwardian Script ITC", "Monotype Corsiva", cursive;
    font-size: clamp(88px, min(8.05vw, 14.3vh), 142px);
    font-weight: 600;
    -webkit-text-stroke: 0.22px currentColor;
    transform: translateY(0.015em) !important;
  }

  .axis-divider {
    height: clamp(94px, 15.0vh, 132px);
  }

  .axis-word {
    font-size: clamp(82px, min(7.55vw, 13.15vh), 130px);
    transition: opacity 1850ms ease, filter 1850ms ease;
  }
}

/* === v0.3.1 HEADER TRACE — Ian's cropped reference ===
   Treat the supplied crop as the geometry master. No other page elements changed. */
@media (min-width: 901px) {
  .axis-header {
    left: 11.55%;
    top: 2.35%;
  }

  .iterative-word {
    font-family: "Kunstler Script", "Künstler Script", "Palace Script MT", "Edwardian Script ITC", "Monotype Corsiva", cursive;
    font-size: clamp(80px, min(7.35vw, 13.25vh), 128px);
    font-weight: 600;
    line-height: .92;
    letter-spacing: 0;
    -webkit-text-stroke: 0.18px currentColor;
    transform: translateY(0.01em) !important;
  }

  .axis-divider {
    height: clamp(88px, 14.15vh, 123px);
    margin-left: clamp(10px, .72vw, 14px);
    margin-right: clamp(18px, 1.20vw, 23px);
  }

  .axis-word {
    font-size: clamp(74px, min(6.85vw, 12.05vh), 119px);
    letter-spacing: .18em;
    transition: opacity 2100ms ease, filter 2100ms ease;
  }
}


/* === v0.3.2 SCRIPT TRACE TEST ===
   Uses Ian's supplied target crop itself as the typographic master for
   “the iterative”, avoiding system-font substitution entirely.
   Page 02 geometry outside the heading is untouched. */
@media (min-width: 901px) {
  .axis-header {
    left: 10.4%;
    right: 2.0%;
    top: 2.35%;
  }

  .axis-header h1.axis-title {
    width: 100%;
    align-items: center;
  }

  .axis-header h1.axis-title > .iterative-word {
    display: block;
    flex: 0 0 48.8%;
    width: 48.8%;
    height: auto;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    transform: none !important;
    overflow: hidden;
    clip-path: inset(0 calc(100% - var(--reveal, 0%)) 0 0);
  }

  .iterative-word img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
  }

  .axis-divider {
    flex: 0 0 1px;
    height: clamp(88px, 14.15vh, 123px);
    margin-left: 0.9%;
    margin-right: 1.7%;
  }

  .axis-word {
    font-size: clamp(74px, min(6.85vw, 12.05vh), 119px);
    letter-spacing: .18em;
    transition: opacity 2100ms ease, filter 2100ms ease;
  }
}

@media (max-width: 900px) {
  .iterative-word img { display: none; }
  .iterative-word::after { content: "the iterative"; }
}


/* === v0.3.3 MR DE HAVILAND VECTOR-TEXT TEST ===
   Replaces the raster trace with a real webfont so the script stays razor-sharp.
   Latest visual reference: whole header a fraction lower; script optically lifted
   within the header; AXIS behaviour preserved. Everything else frozen. */
@media (min-width: 901px) {
  .axis-header {
    left: 10.4%;
    right: 2.0%;
    top: 2.70%;
  }

  .axis-header h1.axis-title {
    width: 100%;
    align-items: center;
  }

  .axis-header h1.axis-title > .iterative-word {
    display: block;
    flex: 0 0 49.6%;
    width: 49.6%;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(0 calc(100% - var(--reveal, 0%)) 0 0);
    font-family: "Mr De Haviland", cursive !important;
    font-size: clamp(92px, min(8.45vw, 14.4vh), 146px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: .72 !important;
    letter-spacing: .005em !important;
    -webkit-text-stroke: 0 !important;
    transform: translateY(-5px) !important;
    color: var(--ink);
  }

  .axis-divider {
    flex: 0 0 1px;
    height: clamp(88px, 14.15vh, 123px);
    margin-left: .35%;
    margin-right: 1.7%;
  }

  .axis-word {
    font-size: clamp(74px, min(6.85vw, 12.05vh), 119px);
    letter-spacing: .18em;
    transition: opacity 2100ms ease, filter 2100ms ease;
  }

  .iterative-word img { display:none !important; }
}

@media (max-width: 900px) {
  .axis-header h1.axis-title > .iterative-word {
    font-family: "Mr De Haviland", cursive !important;
  }
}

/* === v0.3.4 SCRIPT SCALE / CROP FIX ===
   Requested micro-pass only: larger Mr De Haviland, closer to AXIS,
   and no clipping of the lower flourish on the opening t. */
@media (min-width: 901px) {
  .axis-header h1.axis-title > .iterative-word {
    flex-basis: 51.0%;
    width: 51.0%;
    overflow: visible;
    font-size: clamp(104px, min(9.35vw, 15.9vh), 162px) !important;
    line-height: .95 !important;
    transform: translateY(-4px) !important;
  }

  .axis-divider {
    margin-left: .08%;
  }
}

/* === v0.3.5 SCRIPT VISIBILITY FIX ===
   Corrects v0.3.4: the clamp barely changed the rendered size at Ian's viewport,
   and the reveal box was still clipping the script's lower flourish. */
@media (min-width: 901px) {
  .axis-header h1.axis-title > .iterative-word {
    /* A real, visible increase at desktop size. */
    font-size: clamp(122px, min(10.55vw, 17.75vh), 184px) !important;

    /* Keep the script visually close to the divider/AXIS. */
    flex-basis: 49.6%;
    width: 49.6%;

    /* Give Mr De Haviland's long descenders/flourishes room to render
       inside the reveal clip without changing the surrounding layout. */
    line-height: .92 !important;
    padding-top: .18em;
    padding-bottom: .30em;
    margin-top: -.18em;
    margin-bottom: -.30em;
    transform: translateY(-3px) !important;
  }

  .axis-divider {
    margin-left: .10%;
  }
}

/* === v0.3.6 FINAL HEADER MICRO-FIX ===
   Preserve v0.3.5 exactly except for the two observed header details:
   1) once the script reveal completes, remove clip-path entirely so Mr De Haviland's
      opening-t flourish can paint outside the text box without being shaved;
   2) bring the script fractionally closer to the divider / AXIS. */
@media (min-width: 901px) {
  .axis-header h1.axis-title > .iterative-word {
    flex-basis: 48.8%;
    width: 48.8%;
  }

  .axis-header h1.axis-title > .iterative-word.resolved {
    clip-path: none !important;
    overflow: visible !important;
  }

  .axis-divider {
    margin-left: 0;
  }
}

/* === v0.3.7 GAP-ONLY MICRO-FIX ===
   Ian's final spacing request: reduce the horizontal gap between the visible end
   of “the iterative” and the AXIS divider by about two-thirds. Nothing else moves. */
@media (min-width: 901px) {
  .axis-header h1.axis-title > .iterative-word {
    flex-basis: 44.6%;
    width: 44.6%;
  }
}

/* === v0.3.8 DIVIDER OPTICAL-CENTRING MICRO-FIX ===
   Move only the visible divider a few pixels left so it sits optically equidistant
   between the end of “iterative” and the blurred leading edge of AXIS. */
@media (min-width: 901px) {
  .axis-divider {
    transform: translateX(-4px) scaleY(0);
  }
  .axis-divider.resolved {
    transform: translateX(-4px) scaleY(1);
  }
}

/* === v0.9.22 ENTRANCE DROP OCCLUSION FIX ===
   Keep WHAT BECOMES OF ART visually intact while the existing
   IN THE SINGULARITY travels down behind it and emerges below. */
.threshold-line.line-b {
  z-index: 3;
}
.threshold-line.line-b::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  top: -.28em;
  bottom: -.28em;
  background: var(--paper);
}
.threshold-line.line-a {
  z-index: 2;
}
.threshold-line.line-a.drop-below {
  transform: translateY(clamp(72px, 8.2vw, 132px));
}

/* v0.9.23 — threshold drop fix: preserve both phrases as single, intact lines. */
.threshold-line {
  width: 96vw;
  max-width: none;
  white-space: nowrap;
}
.threshold-line.line-b { z-index: 2; }
.threshold-line.line-a { z-index: 1; }
.threshold-line.line-a.drop-below { z-index: 3; }


/* v0.9.24 — entrance separation experiment: anchor IN THE SINGULARITY; lift the question. */
.threshold-line.line-a { z-index: 2; }
.threshold-line.line-b { z-index: 3; }
.threshold-line.line-b.rise-above {
  transform: translateY(clamp(-72px, -8.2vw, -132px));
}

/* v0.9.25 — entrance split: both intact phrases part company from the overlap. */
.threshold-line.line-b::before { display: none; }
.threshold-line.line-b.rise-above {
  transform: translateY(-0.72em);
}
.threshold-line.line-a.drop-below {
  transform: translateY(0.72em);
  filter: none;
}