@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,350..650,40..100,0..1&family=Geist:wght@400;450;500;600&display=swap");

:root {
  --background: #fbfaf7;
  --text: #181713;
  --muted: #706d66;
  --soft: #9c978d;
  --faint: #ebe7df;
  --line: #d8d2c8;
  --hover: #070706;
  --max-width: 820px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  font-family: var(--sans);
}

/* Interactive ideas-page comparison demo. */
.ideas-demo {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 72px 0 120px;
}

.ideas-demo-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: clamp(32px, 8vw, 110px);
  max-width: none;
  padding-bottom: 58px;
}

.ideas-demo-intro-copy {
  max-width: 720px;
}

.ideas-bridge {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.2;
}

.ideas-demo-intro > .demo-visual {
  height: 280px;
  margin: 0;
  border-bottom: 0;
}

.ideas-demo-intro h1 {
  max-width: 680px;
  margin: 12px 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 3.5rem);
  font-weight: 480;
  line-height: 0.98;
  letter-spacing: 0;
}

.ideas-demo-intro > p:last-child {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.ideas-demo-workspace {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  min-height: 650px;
  border-top: 1px solid var(--line);
}

.ideas-demo-index {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 22px 28px 0 0;
  border-right: 1px solid var(--line);
}

.ideas-demo-index .section-kicker {
  margin: 0 0 14px;
}

.demo-index-instruction {
  margin: -5px 0 14px;
  color: var(--soft);
  font-size: 0.78rem;
}

.ideas-demo-index button {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 8px;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-top: 1px solid var(--faint);
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ideas-demo-index button:last-child {
  border-bottom: 1px solid var(--faint);
}

.ideas-demo-index button:hover,
.ideas-demo-index button.is-active {
  color: var(--text);
  background: rgba(216, 210, 200, 0.18);
}

.ideas-demo-index button.is-active {
  box-shadow: inset 3px 0 0 var(--text);
}

.ideas-demo-index button span,
.ideas-demo-index button small {
  color: var(--soft);
  font-size: 0.68rem;
}

.ideas-demo-index button strong {
  font-size: 0.9rem;
  font-weight: 500;
}

.ideas-demo-index button small {
  grid-column: 2;
  margin-top: 3px;
}

.ideas-demo-stage {
  position: relative;
  min-width: 0;
  padding: 26px clamp(26px, 5vw, 76px) 52px;
  overflow: hidden;
}

.ideas-demo-progress {
  position: absolute;
  top: 26px;
  right: clamp(26px, 5vw, 76px);
  color: var(--soft);
  font-size: 0.75rem;
}

.ideas-demo-progress span:first-child {
  color: var(--text);
}

.demo-visual {
  position: relative;
  height: 230px;
  margin: 28px 0 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent 0 49.8%, rgba(216, 210, 200, 0.3) 50%, transparent 50.2%);
}

.demo-visual::before,
.demo-visual::after {
  position: absolute;
  content: "";
  border: 1px solid var(--line);
  border-radius: 50%;
}

.demo-visual::before {
  width: 210px;
  height: 210px;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}

.demo-visual::after {
  width: 130px;
  height: 130px;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
}

.demo-visual i {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--background);
  animation: demo-pulse 3.8s ease-in-out infinite;
}

.demo-visual i:nth-child(1) { left: 16%; top: 54%; }
.demo-visual i:nth-child(2) { left: 34%; top: 28%; animation-delay: .5s; }
.demo-visual i:nth-child(3) { left: 50%; top: 53%; animation-delay: 1s; }
.demo-visual i:nth-child(4) { right: 31%; top: 25%; animation-delay: 1.5s; }
.demo-visual i:nth-child(5) { right: 14%; top: 58%; animation-delay: 2s; }

.demo-visual b {
  position: absolute;
  height: 1px;
  background: var(--text);
  transform-origin: left center;
  animation: demo-draw 4s ease-in-out infinite;
}

.demo-visual b:nth-of-type(1) { left: 16%; top: 55%; width: 35%; transform: rotate(-18deg); }
.demo-visual b:nth-of-type(2) { left: 50%; top: 54%; width: 31%; transform: rotate(-28deg); animation-delay: .8s; }
.demo-visual b:nth-of-type(3) { left: 50%; top: 54%; width: 30%; transform: rotate(17deg); animation-delay: 1.4s; }

.demo-panel {
  display: none;
  max-width: 720px;
  animation: demo-enter .35s ease both;
}

.demo-panel.is-active {
  display: block;
}

.demo-panel h2 {
  max-width: 740px;
  margin: 10px 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  font-weight: 480;
  line-height: 1.03;
  letter-spacing: 0;
}

.demo-panel > p:not(.idea-meta) {
  max-width: 660px;
  margin: 0 0 22px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.55;
}

.demo-facts {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}

.demo-status {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  margin: 20px 0 0;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
}

.demo-status span {
  color: var(--soft);
}

.demo-status strong {
  color: var(--text);
  font-weight: 500;
}

.demo-status + .demo-facts {
  border-top: 0;
}

.demo-facts span {
  color: var(--soft);
}

.demo-facts strong {
  font-weight: 500;
}

.demo-panel details {
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
}

.demo-panel summary {
  padding: 0 0 18px;
  color: var(--muted);
  font-size: 0.84rem;
  cursor: pointer;
}

.demo-panel details p {
  max-width: 650px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.demo-question {
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.demo-question strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.demo-external-link {
  display: inline-block;
  margin: 17px 0 0;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  font-size: 0.84rem;
}

.demo-external-link span {
  display: inline-block;
  margin-left: 6px;
  transition: transform 180ms ease;
}

.demo-external-link:hover span {
  transform: translateX(4px);
}

@keyframes demo-pulse {
  0%, 100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes demo-draw {
  0%, 100% { opacity: .25; clip-path: inset(0 100% 0 0); }
  35%, 75% { opacity: .9; clip-path: inset(0 0 0 0); }
}

@keyframes demo-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .ideas-demo {
    width: min(100% - 32px, 620px);
    padding-top: 48px;
  }

  .ideas-demo-intro {
    display: block;
  }

  .ideas-demo-intro > .demo-visual {
    height: 180px;
    margin-top: 36px;
  }

  .ideas-demo-workspace {
    display: block;
  }

  .ideas-demo-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    padding: 18px 0 22px;
    border-right: 0;
  }

  .ideas-demo-index .section-kicker {
    grid-column: 1 / -1;
  }

  .ideas-demo-index button:nth-of-type(odd) {
    border-right: 1px solid var(--faint);
  }

  .ideas-demo-stage {
    padding: 20px 0 42px;
  }

  .ideas-demo-progress {
    top: 20px;
    right: 0;
  }

  .demo-visual {
    height: 180px;
    margin-top: 44px;
  }

  .demo-visual::before {
    width: 160px;
    height: 160px;
  }

  .demo-visual::after {
    width: 100px;
    height: 100px;
    top: 38px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(216, 210, 200, 0.24) 1px, transparent 1px) center / 104px 100%,
    var(--background);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(18px, 5vw, 70px);
  background: rgba(251, 250, 247, 0.84);
  backdrop-filter: blur(14px);
}

.brand {
  justify-self: end;
  margin-right: 88px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 520;
  font-variation-settings: "SOFT" 75, "WONK" 1;
}

.site-header nav,
.hero-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header nav {
  justify-content: center;
}

.site-header a,
.hero-nav a,
.directions a {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
}

.site-header a:hover,
.hero-nav a:hover,
.directions a:hover,
.idea-list a:hover span {
  color: var(--hover);
}

main {
  width: min(var(--max-width), calc(100vw - 40px));
  margin: 0 auto;
}

body:has(.lens-symbol) main {
  width: min(1120px, calc(100vw - 56px));
}

.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(260px, 380px);
  gap: clamp(48px, 8vw, 92px);
  align-items: center;
  justify-content: center;
  padding: 74px 0 86px;
}

.hero-copy {
  min-width: 0;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
}

.hero .eyebrow {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2.15rem, 4.2vw, 3.45rem);
  font-weight: 500;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 0.98;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  max-width: 790px;
  margin: 22px 0 28px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.45vw, 2.05rem);
  font-weight: 450;
  font-variation-settings: "SOFT" 82, "WONK" 1;
  line-height: 1.18;
  letter-spacing: 0;
}

.summary {
  max-width: 660px;
  margin: 0 0 42px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.5;
}

.fold-symbol {
  width: min(380px, 100%);
  justify-self: center;
}

.lens-symbol {
  width: min(390px, 100%);
  justify-self: center;
}

.fold-symbol svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lens-symbol svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lens-field path,
.lens-clean path,
.lens-axis path,
.lens-orbits ellipse,
.lens-orbits path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.lens-field path {
  stroke: var(--line);
  stroke-width: 1.05;
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: lens-field-loop 8s ease-in-out infinite;
}

.lens-field path:nth-child(2) {
  animation-delay: 0.12s;
}

.lens-field path:nth-child(3) {
  animation-delay: 0.24s;
}

.lens-orbits ellipse,
.lens-orbits path {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0;
  animation: lens-orbit-loop 8s ease-in-out infinite;
}

.lens-orbits ellipse:nth-child(2) {
  animation-delay: 0.12s;
}

.lens-orbits path {
  animation-delay: 0.24s;
}

.lens-clean path {
  stroke: var(--text);
  stroke-width: 1.25;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: lens-clean-loop 8s ease-in-out infinite;
}

.lens-clean path:nth-child(2) {
  animation-delay: 0.12s;
}

.lens-clean path:nth-child(3) {
  animation-delay: 0.24s;
}

.lens-axis path {
  stroke: var(--faint);
  stroke-width: 1;
  opacity: 0;
  animation: lens-axis-loop 8s ease-in-out infinite;
}

.lens-nodes circle {
  fill: var(--background);
  stroke: var(--text);
  stroke-width: 1.1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: lens-node-loop 8s ease-in-out infinite;
}

.lens-nodes circle:nth-child(1),
.lens-nodes circle:nth-child(2),
.lens-nodes circle:nth-child(3) {
  stroke: var(--soft);
  animation-delay: 0.12s;
}

.lens-nodes circle:nth-child(5) {
  animation-delay: 0.28s;
}

.lens-nodes circle:nth-child(6) {
  animation-delay: 0.36s;
}

.lens-nodes circle:nth-child(7) {
  animation-delay: 0.44s;
}

@keyframes lens-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes lens-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes lens-node-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lens-field-loop {
  0%,
  5% {
    opacity: 0;
    stroke-dashoffset: 230;
  }

  20%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  92%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes lens-orbit-loop {
  0%,
  14% {
    opacity: 0;
  }

  28%,
  80% {
    opacity: 1;
  }

  94%,
  100% {
    opacity: 0;
  }
}

@keyframes lens-clean-loop {
  0%,
  26% {
    opacity: 0;
    stroke-dashoffset: 320;
  }

  46%,
  84% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes lens-axis-loop {
  0%,
  34% {
    opacity: 0;
  }

  48%,
  82% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
  }
}

@keyframes lens-node-loop {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.72);
  }

  54%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.fold-plane {
  fill: rgba(251, 250, 247, 0.76);
  stroke: var(--text);
  stroke-width: 1.35;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: fold-plane-in 0.7s ease-out forwards;
}

.plane-base {
  animation-delay: 0.28s;
}

.plane-front {
  animation-delay: 0.42s;
}

.plane-lift {
  fill: rgba(251, 250, 247, 0.92);
  animation-delay: 0.56s;
}

.fold-grid path,
.fold-creases path,
.fold-trace,
.fold-marks path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fold-grid path {
  opacity: 0;
  animation: fold-fade-in 0.7s ease-out 0.95s forwards;
}

.fold-creases path {
  stroke: var(--soft);
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: fold-draw 1.15s ease-out 1.15s forwards;
}

.fold-trace {
  stroke: var(--text);
  stroke-width: 1.25;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: fold-draw 1.35s ease-out 1.55s forwards;
}

.fold-nodes circle {
  fill: var(--background);
  stroke: var(--text);
  stroke-width: 1.1;
  opacity: 0;
  animation: fold-fade-in 0.45s ease-out 2.35s forwards;
}

.fold-marks {
  opacity: 0;
  animation: fold-fade-in 0.55s ease-out 2.5s forwards;
}

.fold-marks path {
  stroke: var(--soft);
}

@keyframes fold-plane-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fold-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fold-fade-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lens-field path,
  .lens-clean path,
  .lens-axis path,
  .lens-orbits ellipse,
  .lens-orbits path,
  .lens-nodes circle,
  .projection-square path,
  .projection-cube path,
  .projection-complex path,
  .projection-ghosts path,
  .system-nodes circle,
  .fold-plane,
  .fold-grid path,
  .fold-creases path,
  .fold-trace,
  .fold-nodes circle,
  .fold-marks,
  .professional-graphic .step-guide,
  .professional-graphic .step-line,
  .professional-graphic .step-shadow,
  .professional-graphic .step-node,
  .independent-graphic .idea-arc,
  .independent-graphic .idea-link,
  .independent-graphic .idea-line,
  .independent-graphic .idea-node,
  .layer-graphic .layer-guide,
  .layer-graphic .layer-plate,
  .layer-graphic .layer-connectors,
  .layer-graphic .layer-cap,
  .layer-graphic .layer-node,
  .question-graphic .question-arc,
  .question-graphic .question-path,
  .question-graphic .question-link,
  .question-graphic .question-return,
  .question-graphic .question-cap,
  .question-graphic .question-ground,
  .question-graphic .question-node {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
}

.hero-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 680px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-nav a {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px 12px 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.03rem;
  font-weight: 440;
  font-variation-settings: "SOFT" 74, "WONK" 1;
  line-height: 1;
}

.hero-nav a span {
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-nav a:hover {
  color: var(--hover);
}

.hero-nav a:hover span {
  color: var(--muted);
}

.directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 0 0 96px;
  border-bottom: 1px solid var(--line);
}

.directions article {
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.direction-graphic {
  width: min(100%, 440px);
  height: 126px;
  display: grid;
  place-items: center;
  margin: 30px 0 28px;
}

.direction-graphic svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.graphic-main,
.graphic-soft {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.graphic-main {
  stroke: var(--text);
  stroke-width: 1.25;
}

.graphic-soft {
  stroke: var(--line);
  stroke-width: 1;
}

.graphic-nodes circle {
  fill: var(--background);
  stroke: var(--text);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.professional-graphic .step-guide,
.professional-graphic .step-line,
.professional-graphic .step-shadow {
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
}

.professional-graphic .step-guide {
  animation: step-guide-loop 7.5s ease-in-out infinite;
}

.professional-graphic .step-line {
  animation: step-line-loop 7.5s ease-in-out infinite;
}

.professional-graphic .step-shadow {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: step-shadow-loop 7.5s ease-in-out infinite;
}

.professional-graphic .step-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: step-node-loop 7.5s ease-in-out infinite;
}

.professional-graphic .step-node:nth-child(1) {
  animation-delay: 0.45s;
}

.professional-graphic .step-node:nth-child(2) {
  animation-delay: 0.9s;
}

.professional-graphic .step-node:nth-child(3) {
  animation-delay: 1.35s;
}

.professional-graphic .step-node:nth-child(4) {
  animation-delay: 1.8s;
}

.professional-graphic .step-node:nth-child(5) {
  animation-delay: 2.25s;
}

.independent-graphic .idea-arc,
.independent-graphic .idea-link,
.independent-graphic .idea-line {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}

.independent-graphic .idea-arc {
  animation: idea-arc-loop 7.5s ease-in-out infinite;
}

.independent-graphic .idea-arc:nth-of-type(4) {
  animation-delay: 0.18s;
}

.independent-graphic .idea-link {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: idea-link-loop 7.5s ease-in-out infinite;
}

.independent-graphic .idea-line {
  animation: idea-line-loop 7.5s ease-in-out infinite;
}

.independent-graphic .idea-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: idea-node-loop 7.5s ease-in-out infinite;
}

.independent-graphic .idea-node:nth-child(1) {
  animation-delay: 0.5s;
}

.independent-graphic .idea-node:nth-child(2) {
  animation-delay: 0.85s;
}

.independent-graphic .idea-node:nth-child(3) {
  animation-delay: 1.2s;
}

.independent-graphic .idea-node:nth-child(4) {
  animation-delay: 1.55s;
}

.independent-graphic .idea-node:nth-child(5) {
  animation-delay: 1.9s;
}

.independent-graphic .idea-node:nth-child(6) {
  animation-delay: 2.25s;
}

.layer-graphic .layer-guide,
.layer-graphic .layer-plate,
.layer-graphic .layer-connectors,
.layer-graphic .layer-cap {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.layer-graphic .layer-guide,
.layer-graphic .layer-connectors {
  animation: layer-soft-loop 9s ease-in-out infinite;
}

.layer-graphic .layer-plate {
  animation: layer-plate-loop 9s ease-in-out infinite;
}

.layer-graphic .layer-cap {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: layer-cap-loop 9s ease-in-out infinite;
}

.layer-graphic .layer-guide-bottom,
.layer-graphic .layer-plate-bottom {
  animation-delay: 0s;
}

.layer-graphic .layer-guide-middle,
.layer-graphic .layer-plate-middle {
  animation-delay: 0.55s;
}

.layer-graphic .layer-guide-top,
.layer-graphic .layer-plate-top {
  animation-delay: 1.1s;
}

.layer-graphic .layer-connectors {
  animation-delay: 1.6s;
}

.layer-graphic .layer-cap {
  animation-delay: 1.95s;
}

.layer-graphic .layer-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: layer-node-loop 9s ease-in-out infinite;
}

.layer-graphic .layer-node:nth-child(1) {
  animation-delay: 0.5s;
}

.layer-graphic .layer-node:nth-child(2) {
  animation-delay: 0.85s;
}

.layer-graphic .layer-node:nth-child(3) {
  animation-delay: 1.4s;
}

.layer-graphic .layer-node:nth-child(4) {
  animation-delay: 2.2s;
}

.layer-graphic .layer-node:nth-child(5) {
  animation-delay: 2.35s;
}

.question-graphic .question-arc,
.question-graphic .question-path,
.question-graphic .question-link,
.question-graphic .question-return,
.question-graphic .question-cap,
.question-graphic .question-ground {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
}

.question-graphic .question-path {
  animation: question-path-loop 9s ease-in-out infinite;
}

.question-graphic .question-cap {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: question-cap-loop 9s ease-in-out infinite;
}

.question-graphic .question-arc,
.question-graphic .question-link,
.question-graphic .question-ground {
  animation: question-soft-loop 9s ease-in-out infinite;
}

.question-graphic .question-arc {
  animation-delay: 0.4s;
}

.question-graphic .question-link {
  animation-delay: 1.15s;
}

.question-graphic .question-ground {
  animation-delay: 1.45s;
}

.question-graphic .question-return {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: question-return-loop 9s ease-in-out infinite;
}

.question-graphic .question-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: question-node-loop 9s ease-in-out infinite;
}

.question-graphic .question-node:nth-child(1) {
  animation-delay: 0.45s;
}

.question-graphic .question-node:nth-child(2) {
  animation-delay: 0.85s;
}

.question-graphic .question-node:nth-child(3) {
  animation-delay: 1.25s;
}

.question-graphic .question-node:nth-child(4) {
  animation-delay: 1.65s;
}

.question-graphic .question-node:nth-child(5) {
  animation-delay: 2.05s;
}

.question-graphic .question-node:nth-child(6) {
  animation-delay: 2.25s;
}

@keyframes step-guide-loop {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 430;
  }

  34%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes step-line-loop {
  0%,
  14% {
    opacity: 1;
    stroke-dashoffset: 430;
  }

  46%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes step-shadow-loop {
  0%,
  28% {
    opacity: 0;
    stroke-dashoffset: 250;
  }

  52%,
  80% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes step-node-loop {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.72);
  }

  28%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes idea-arc-loop {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 360;
  }

  34%,
  78% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes idea-link-loop {
  0%,
  20% {
    opacity: 0;
    stroke-dashoffset: 260;
  }

  46%,
  80% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes idea-line-loop {
  0%,
  14% {
    opacity: 1;
    stroke-dashoffset: 360;
  }

  48%,
  84% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes idea-node-loop {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.72);
  }

  30%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes layer-soft-loop {
  0%,
  8% {
    opacity: 0;
    stroke-dashoffset: 900;
  }

  34%,
  80% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes layer-plate-loop {
  0%,
  10% {
    opacity: 0;
    stroke-dashoffset: 900;
  }

  36%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes layer-cap-loop {
  0%,
  26% {
    opacity: 0;
    stroke-dashoffset: 100;
  }

  44%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes layer-node-loop {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.72);
  }

  32%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes question-path-loop {
  0%,
  10% {
    opacity: 1;
    stroke-dashoffset: 380;
  }

  40%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes question-cap-loop {
  0%,
  24% {
    opacity: 0;
    stroke-dashoffset: 180;
  }

  46%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes question-soft-loop {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 380;
  }

  44%,
  80% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes question-return-loop {
  0%,
  34% {
    opacity: 0;
    stroke-dashoffset: 220;
  }

  54%,
  78% {
    opacity: 0.68;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes question-node-loop {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.72);
  }

  30%,
  84% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.directions h2,
.section-heading h2 {
  margin: 16px 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.04;
  letter-spacing: 0;
}

.directions p,
.list p,
.idea-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.68;
}

.directions a {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
}

.directions a::after {
  content: "";
  width: 18px;
  height: 1px;
  margin-left: 10px;
  background: currentColor;
}

.index-section {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 58px;
  padding: 92px 0 0;
}

.section-heading {
  padding-top: 2px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-subtitle {
  max-width: 360px;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.45;
}

.section-graphic {
  width: min(100%, 380px);
  margin: 34px 0 0;
}

.section-graphic svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.list,
.idea-list {
  border-top: 1px solid var(--line);
}

.list article,
.idea-list a {
  display: block;
  padding: 26px 0 27px;
  border-bottom: 1px solid var(--faint);
}

.list h3,
.idea-list span {
  display: block;
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.3;
}

.professional-main {
  width: min(1440px, calc(100vw - 64px));
}

.professional-hero {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.48fr);
  gap: clamp(34px, 4.8vw, 72px);
  align-items: center;
  padding: 76px 0 88px;
}

.professional-copy {
  max-width: 410px;
}

.professional-copy h1 {
  margin: 18px 0 28px;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.02;
}

.professional-copy p:not(.section-kicker) {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(0.96rem, 1.15vw, 1.06rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.55;
}

.evolution-figure {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.evolution-figure img,
.professional-system-visual {
  display: block;
  width: min(100%, 860px);
  height: auto;
  margin-left: auto;
}

.professional-system-visual {
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.projection-square path,
.projection-cube path,
.projection-complex path,
.projection-ghosts path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 1100px) {
  .professional-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 64px 0 72px;
  }

  .professional-copy {
    max-width: 660px;
  }

  .evolution-figure {
    justify-content: flex-start;
  }

  .professional-system-visual {
    width: min(100%, 760px);
    margin-left: 0;
  }
}

.projection-square path,
.projection-cube path,
.projection-complex path {
  stroke: var(--text);
  stroke-width: 1.35;
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
}

.projection-ghosts path {
  stroke: var(--line);
  stroke-width: 0.78;
  opacity: 0;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
}

.projection-square path {
  animation: projection-square-loop 8s ease-in-out infinite;
}

.projection-cube path {
  stroke-width: 1.45;
}

.projection-complex path {
  stroke-width: 1.18;
}

.first-ghosts path {
  animation: projection-ghost-one-loop 8s ease-in-out infinite;
}

.projection-cube path {
  animation: projection-cube-loop 8s ease-in-out infinite;
}

.second-ghosts path {
  animation: projection-ghost-two-loop 8s ease-in-out infinite;
}

.projection-complex path {
  animation: projection-complex-loop 8s ease-in-out infinite;
}

.projection-complex path:nth-child(n + 11) {
  stroke: var(--line);
  stroke-width: 0.9;
}

.system-nodes circle {
  fill: var(--background);
  stroke: var(--text);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

@keyframes system-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes projection-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes projection-ghost-draw {
  to {
    opacity: 0.58;
    stroke-dashoffset: 0;
  }
}

@keyframes projection-square-loop {
  0%,
  4% {
    opacity: 0;
    stroke-dashoffset: 820;
  }

  14%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  92%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes projection-ghost-one-loop {
  0%,
  10% {
    opacity: 0;
    stroke-dashoffset: 560;
  }

  23%,
  78% {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }

  90%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes projection-cube-loop {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 820;
  }

  32%,
  84% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  94%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes projection-ghost-two-loop {
  0%,
  30% {
    opacity: 0;
    stroke-dashoffset: 560;
  }

  43%,
  80% {
    opacity: 0.46;
    stroke-dashoffset: 0;
  }

  92%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes projection-complex-loop {
  0%,
  40% {
    opacity: 0;
    stroke-dashoffset: 820;
  }

  58%,
  86% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  96%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes system-node-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.journey-section {
  padding: 18px 0 72px;
}

.journey-heading {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 58px;
  align-items: end;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
}

.journey-heading h2 {
  max-width: 640px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.55vw, 2.08rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.05;
}

.journey-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.journey-track::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.journey-track li {
  position: relative;
  min-height: 90px;
  padding: 0 20px 0 0;
}

.journey-index {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--background);
  font-family: var(--sans);
  font-size: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.journey-track strong {
  display: block;
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 560;
  line-height: 1.18;
}

.journey-track p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.35;
}

.journey-track small {
  display: block;
  margin: 0 0 9px;
  color: var(--soft);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.capability-section {
  padding: 10px 0 120px;
}

.capability-heading {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 58px;
  align-items: end;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
}

.capability-heading h2 {
  max-width: 620px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.05;
}

.capability-list article {
  display: grid;
  grid-template-columns: 64px minmax(240px, 0.72fr) minmax(420px, 1fr);
  gap: 34px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--faint);
}

.capability-number {
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.capability-copy h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.08rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.05;
}

.capability-copy p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.5;
}

.capability-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.capability-list li {
  border-bottom: 1px solid var(--faint);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.28;
}

.capability-list ul:has(details[open]) {
  grid-template-columns: 1fr;
}

.capability-list ul:has(details[open]) li:not(:has(details[open])) {
  display: none;
}

.capability-list details {
  padding: 0;
}

.capability-list summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 18px;
  align-items: center;
  padding: 13px 0 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.capability-list summary::-webkit-details-marker {
  display: none;
}

.capability-list summary::after {
  content: "+";
  color: var(--soft);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.capability-list details[open] summary {
  color: var(--hover);
  border-bottom: 1px solid var(--line);
}

.capability-list details[open] summary::after {
  content: "-";
}

.topic-detail {
  padding: 22px 0 24px;
  color: var(--muted);
}

.topic-detail p {
  max-width: 860px;
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.55;
}

.topic-detail dl {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px 24px;
  max-width: 860px;
  margin: 0;
}

.topic-detail dt {
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.topic-detail dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.5;
}

.ideas-main {
  position: relative;
  width: min(1240px, calc(100vw - 64px));
}

.ideas-index {
  position: fixed;
  left: clamp(18px, 3vw, 44px);
  top: 50%;
  z-index: 2;
  display: grid;
  gap: 12px;
  translate: 0 -50%;
}

.ideas-index a {
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
}

.ideas-index a:hover {
  color: var(--text);
}

.ideas-philosophy {
  min-height: calc(72vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 880px;
  padding: 84px 0 56px;
}

.ideas-philosophy h1 {
  max-width: 860px;
  margin: 28px 0 34px;
  font-size: clamp(1.86rem, 3.96vw, 3.84rem);
  line-height: 1.02;
}

.ideas-philosophy p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.22rem, 2vw, 1.48rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.48;
}

.selected-ideas {
  padding: 54px 0 120px;
}

.ideas-section-heading {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 58px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.ideas-section-heading h2 {
  max-width: 780px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 2.16rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.08;
}

.idea-spread {
  min-height: 82vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}

.idea-copy {
  min-width: 0;
}

.idea-text-first .idea-copy {
  grid-column: 1 / span 5;
}

.idea-text-first .idea-visual {
  grid-column: 7 / -1;
}

.idea-visual-first .idea-visual {
  grid-column: 1 / span 7;
}

.idea-visual-first .idea-copy {
  grid-column: 9 / -1;
}

.idea-meta {
  margin: 0 0 24px;
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.idea-copy h3 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(1.32rem, 2.82vw, 2.91rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.06;
}

.idea-copy p:not(.idea-meta),
.current-state {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.55;
}

.current-state {
  margin-top: 34px;
}

.current-state span {
  display: block;
  margin-bottom: 9px;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.idea-copy a,
.spread-link {
  display: inline-flex;
  align-items: center;
  margin-top: 34px;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 500;
}

.idea-copy a::after,
.spread-link::after {
  content: "";
  width: 18px;
  height: 1px;
  margin-left: 10px;
  background: currentColor;
}

.idea-visual {
  min-height: 380px;
  display: grid;
  place-items: center;
}

.idea-visual svg {
  width: min(100%, 560px);
  height: auto;
  overflow: visible;
}

.visual-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.visual-line.soft {
  stroke: var(--line);
}

.visual-nodes circle {
  fill: var(--background);
  stroke: var(--text);
  stroke-width: 1.1;
}

.visual-labels text {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
}

.systems-visual .visual-labels text {
  text-anchor: start;
}

.reliability-spread {
  grid-template-rows: auto auto auto;
  align-items: start;
  min-height: 72vh;
}

.wide-question {
  grid-column: 1 / -1;
}

.wide-question h3 {
  max-width: 980px;
}

.reliability-duo {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: 100%;
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.reliability-duo div {
  padding-top: 28px;
}

.reliability-duo span {
  display: block;
  margin-bottom: 18px;
  color: var(--soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.reliability-duo p {
  max-width: 360px;
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(0.96rem, 1.8vw, 1.47rem);
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
  line-height: 1.2;
}

.reliability-spread .spread-link {
  grid-column: 2 / -1;
}

.loop-visual {
  justify-items: center;
}

.loop-visual ol {
  width: min(320px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.loop-visual li {
  position: relative;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.52rem;
  font-weight: 430;
  font-variation-settings: "SOFT" 76, "WONK" 1;
}

.loop-visual li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -15px;
  width: 1px;
  height: 28px;
  background: var(--soft);
}

.loop-visual li:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--soft);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  translate: 42px -50%;
}

.writing-main {
  width: min(1120px, calc(100vw - 64px));
}

.writing-hero {
  min-height: calc(70vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 76px 0 84px;
}

.writing-hero h1 {
  max-width: 880px;
  margin: 24px 0 30px;
  font-size: clamp(1.8rem, 3.6vw, 3.48rem);
  line-height: 1.04;
}

.writing-hero p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.8vw, 1.34rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 78, "WONK" 1;
  line-height: 1.5;
}

.writing-list {
  padding: 0 0 110px;
  border-top: 1px solid var(--line);
}

.writing-list article {
  position: relative;
  display: grid;
  grid-template-columns: 176px minmax(420px, 1.15fr) minmax(280px, 0.85fr) 132px;
  gap: 44px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--faint);
}

.writing-list article::before {
  content: "";
  position: absolute;
  left: 176px;
  right: 0;
  top: 0;
  height: 1px;
  background: transparent;
  transition: background 180ms ease;
}

.writing-list article:hover::before {
  background: var(--line);
}

.writing-list .idea-meta {
  max-width: 132px;
  margin: 0;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.28;
}

.writing-list h2 {
  max-width: 560px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.25vw, 3rem);
  font-weight: 440;
  font-variation-settings: "SOFT" 82, "WONK" 1;
  line-height: 1;
}

.writing-list p:not(.idea-meta) {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.62;
}

.writing-list a {
  justify-self: end;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
}

.writing-list a::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: currentColor;
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .brand {
    justify-self: start;
    margin-right: 0;
  }

  .site-header nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 74px 0 86px;
  }

  .fold-symbol,
  .lens-symbol {
    width: min(320px, 84vw);
    justify-self: start;
  }

  .directions,
  .index-section,
  .capability-heading,
  .journey-heading,
  .professional-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .directions {
    padding-bottom: 76px;
  }

  .index-section {
    padding-top: 72px;
  }

  .professional-main {
    width: min(100vw - 40px, var(--max-width));
  }

  .professional-hero {
    padding: 70px 0 84px;
  }

  .professional-copy {
    max-width: 660px;
  }

  .evolution-figure img,
  .professional-system-visual {
    width: 100%;
    margin-top: 8px;
  }

  .journey-section {
    padding-bottom: 78px;
  }

  .journey-track {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 34px;
    overflow: visible;
    padding-bottom: 0;
  }

  .journey-track::before {
    top: 0;
    bottom: 0;
    left: 5px;
    width: 1px;
    height: auto;
  }

  .journey-track li {
    min-height: auto;
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 34px;
  }

  .journey-index {
    margin-bottom: 0;
  }

  .capability-section {
    padding-bottom: 84px;
  }

  .capability-list article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px 22px;
  }

  .capability-list ul {
    grid-column: 2;
    grid-template-columns: 1fr;
  }

  .topic-detail {
    padding-right: 0;
  }

  .ideas-main {
    width: min(100vw - 40px, var(--max-width));
  }

  .ideas-index {
    display: none;
  }

  .ideas-philosophy {
    min-height: auto;
    padding: 76px 0 62px;
  }

  .ideas-philosophy h1 {
    font-size: clamp(1.8rem, 6.6vw, 2.88rem);
  }

  .ideas-section-heading,
  .idea-spread {
    grid-template-columns: 1fr;
  }

  .idea-spread {
    min-height: auto;
    gap: 34px;
    padding: 72px 0;
  }

  .idea-text-first .idea-copy,
  .idea-text-first .idea-visual,
  .idea-visual-first .idea-copy,
  .idea-visual-first .idea-visual,
  .wide-question,
  .reliability-duo,
  .reliability-spread .spread-link {
    grid-column: auto;
  }

  .idea-visual-first .idea-copy {
    order: -1;
  }

  .idea-visual {
    min-height: auto;
    place-items: start;
  }

  .reliability-duo {
    grid-template-columns: 1fr;
  }

  .writing-main {
    width: min(100vw - 40px, var(--max-width));
  }

  .writing-hero {
    min-height: auto;
  }

  .writing-list article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .writing-list article::before {
    left: 0;
  }

  .writing-list h2,
  .writing-list p:not(.idea-meta) {
    max-width: none;
  }

  .writing-list a {
    justify-self: start;
    margin-top: 8px;
  }

}

@media (max-width: 560px) {
  main {
    width: min(100vw - 32px, var(--max-width));
  }

  .site-header nav {
    gap: 14px 18px;
  }

  .hero-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-nav a {
    min-height: 54px;
    font-size: 0.98rem;
  }

  .capability-list article {
    grid-template-columns: 1fr;
  }

  .capability-list ul {
    grid-column: auto;
  }

  .topic-detail dl {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .loop-visual li:last-child::after {
    display: none;
  }

}