@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --paper-deep: #e9e4d9;
  --ink: #171716;
  --ink-soft: #4e4b45;
  --rule: rgba(23, 23, 22, .32);
  --rule-light: rgba(23, 23, 22, .16);
  --red: #b6382b;
  --blue: #294879;
  --green: #3d644b;
  --display: "DM Serif Display", "Iowan Old Style", "Bodoni MT", Didot, Georgia, serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --space-1: .45rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-quick: ease;
  --time-quick: 140ms;
  --time-control: 190ms;
  --page-max: 1440px;
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  background: var(--paper);
  scrollbar-color: #8b8273 var(--paper-deep);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("../images/ivory-fibers.svg");
  background-size: 280px 280px;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--red);
}

::selection { color: var(--paper); background: var(--ink); }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .2em; }
button { color: inherit; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform var(--time-quick) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.page-wrap {
  width: min(var(--page-max), 100% - var(--page-gutter) * 2);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3.25rem);
  min-height: 5rem;
  padding: .75rem var(--page-gutter);
  border-bottom: 1px solid var(--rule);
  background: rgba(243, 240, 232, .97);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .2rem;
  width: max-content;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand-dot { width: .32rem; height: .32rem; border-radius: 50%; background: var(--red); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 2.4vw, 2.25rem);
}
.primary-nav a,
.footer-nav a {
  position: relative;
  padding-block: .45rem;
  text-decoration: none;
  font-size: .91rem;
  line-height: 1.2;
}
.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: .12rem;
  left: 0;
  height: 1px;
  background: var(--red);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--time-control) var(--ease-out);
}
.primary-nav a[aria-current="location"]::after { transform: scaleX(1); }
.site-status,
.mono-note {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .045em;
}
.site-status { display: flex; align-items: center; gap: .55rem; white-space: nowrap; text-transform: uppercase; }
.site-status > span { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--red); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  min-height: min(760px, calc(100svh - 5rem));
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.hero-copy { max-width: 42rem; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 400; }
.hero h1 {
  max-width: 8.5ch;
  margin-bottom: 1.6rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: .91;
  letter-spacing: -.035em;
}
.hero-intro {
  max-width: 35ch;
  margin-bottom: 2rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  line-height: 1.34;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }

.button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  font-size: .94rem;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--time-quick) var(--ease-quick), background-color var(--time-quick) var(--ease-quick), border-color var(--time-quick) var(--ease-quick), transform 140ms var(--ease-out);
}
.button svg,
.text-link svg,
.icon-button svg,
.back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button--accent { color: #fffdf8; border-color: var(--red); background: var(--red); }
.button--outline { color: var(--ink); background: transparent; }
.button--ink { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.button:active { transform: scale(.97); }
.button:disabled { color: #777168; border-color: #b8b1a5; background: #e4dfd5; cursor: not-allowed; transform: none; }
.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .7rem;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  font-size: .94rem;
}

.specimen-frame { border: 1px solid var(--rule); }
.hero-field { padding: .85rem 1rem 1rem; }
.specimen-topline,
.specimen-footline { display: flex; align-items: center; gap: .8rem; }
.specimen-topline { justify-content: space-between; flex-wrap: wrap; }
.specimen-topline > span,
.accent-label,
.blue-label,
.red-label {
  color: var(--blue);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.specimen-topline .accent-label,
.red-label { color: var(--red); }
.hero-canvas-wrap {
  position: relative;
  height: clamp(250px, 32vw, 420px);
  margin-block: .8rem;
  overflow: hidden;
  border-block: 1px solid var(--rule-light);
}
.field-canvas,
.orbit-canvas { display: block; width: 100%; height: 100%; }
.field-canvas { touch-action: pan-y; }
.field-axis { position: absolute; pointer-events: none; background: var(--rule-light); }
.field-axis--x { top: 50%; right: 0; left: 0; height: 1px; }
.field-axis--y { top: 0; bottom: 0; left: 50%; width: 1px; }
.field-cross { position: absolute; color: var(--blue); font-family: var(--mono); font-size: .9rem; line-height: 1; }
.field-cross--one { top: 13%; left: 27%; }
.field-cross--two { right: 12%; bottom: 20%; color: var(--red); }
.field-coordinates { position: absolute; right: .4rem; bottom: .35rem; color: var(--blue); font: .62rem var(--mono); letter-spacing: .04em; }
.specimen-footline { display: grid; grid-template-columns: auto minmax(5rem, 1fr) auto; }
.specimen-footline label { font-size: .8rem; }
.specimen-footline .mono-note { text-align: right; }

.range-control {
  width: 100%;
  min-width: 3rem;
  height: 2.5rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.range-control::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.range-control::-moz-range-track { height: 2px; background: var(--rule); }
.range-control::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -.38rem;
  appearance: none;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.range-control::-moz-range-thumb { width: .9rem; height: .9rem; border: 1px solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.range-control:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.ruled-section { border-top: 1px solid var(--rule); }
.approach-section {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(14rem, .9fr) minmax(12rem, .55fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.approach-section h2,
.section-intro h2,
.method-section > .section-intro h2 {
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.red-period { color: var(--red); }
.approach-copy { max-width: 43ch; padding-top: .35rem; color: var(--ink-soft); }
.approach-copy p { margin-bottom: 1.1rem; }
.approach-note { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.approach-note .blue-label { margin-bottom: .6rem; }
.approach-note h3 { margin-bottom: .7rem; font-family: var(--display); font-size: 1.75rem; line-height: 1.05; }
.approach-note > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: .88rem; }

.experiences-section,
.movement-section,
.components-section,
.method-section { padding-block: clamp(3.75rem, 7vw, 6.25rem); }
.section-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
.section-intro h2 { font-size: clamp(2.7rem, 6vw, 5.4rem); }
.section-subtitle { max-width: 65ch; margin: .85rem 0 0; color: var(--ink-soft); font-family: var(--display); font-size: clamp(1.08rem, 1.6vw, 1.35rem); line-height: 1.35; }
.section-aside { flex: 0 0 auto; padding-bottom: .25rem; text-align: right; text-transform: uppercase; }
.experiment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: clamp(3rem, 6vw, 5rem); }
.experiment { min-width: 0; }
.experiment-heading { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .75rem; align-items: start; margin-bottom: 1.05rem; }
.experiment-number { color: var(--red); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
.experiment-heading h3 { margin-bottom: .25rem; font-family: var(--display); font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.08; letter-spacing: -.02em; }
.experiment-heading p { max-width: 40ch; margin-bottom: 0; color: var(--ink-soft); font-size: .91rem; }
.type-stage {
  position: relative;
  display: grid;
  min-height: clamp(210px, 25vw, 320px);
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  background: rgba(232, 227, 217, .42);
}
.pulse-word { grid-area: 1 / 1; font-family: var(--display); font-size: clamp(6rem, 13.5vw, 11rem); line-height: .85; letter-spacing: -.075em; user-select: none; }
.pulse-word--main { position: relative; z-index: 1; color: var(--ink); -webkit-text-stroke: var(--pulse-stroke, 0) var(--ink); }
.pulse-word--echo { color: var(--blue); opacity: .11; transform: translateX(0); }
.pulse-word--echo-second { color: var(--red); opacity: .12; transform: translateX(0); }
.stage-corner { position: absolute; width: 1rem; height: 1rem; border-color: var(--red); border-style: solid; }
.stage-corner--tl { top: .8rem; left: .8rem; border-width: 1px 0 0 1px; }
.stage-corner--br { right: .8rem; bottom: .8rem; border-width: 0 1px 1px 0; }
.control-row { display: grid; grid-template-columns: auto minmax(4rem, 1fr) auto; align-items: center; gap: .85rem; margin-top: .55rem; }
.control-row label { white-space: nowrap; }
.range-output { min-width: 3.2rem; color: var(--blue); text-align: right; }

.orbit-stage { position: relative; height: clamp(220px, 26vw, 330px); overflow: hidden; background: rgba(232, 227, 217, .32); }
.orbit-canvas { touch-action: pan-y; }
.orbit-center { position: absolute; top: 50%; left: 50%; width: 4.1rem; height: 4.1rem; border: 1px solid var(--rule); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.orbit-center::after { position: absolute; top: 50%; left: 50%; width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); content: ""; transform: translate(-50%, -50%); }
.orbit-cross { position: absolute; color: var(--blue); font-family: var(--mono); font-size: .85rem; pointer-events: none; }
.orbit-cross--a { top: 13%; left: 15%; }
.orbit-cross--b { right: 13%; bottom: 16%; color: var(--red); }
.interaction-hint { margin: .55rem 0 0; color: var(--ink-soft); font-size: .78rem; }

.atlas-stage { position: relative; height: clamp(220px, 26vw, 330px); overflow: hidden; background: rgba(232, 227, 217, .35); }
.atlas-svg { width: 100%; height: 100%; }
.atlas-svg path { fill: none; stroke: var(--ink); stroke-width: .8; vector-effect: non-scaling-stroke; }
.atlas-svg [data-atlas-layer="back"] path { stroke: #77746d; stroke-width: .65; }
.atlas-svg [data-atlas-layer="front"] path:nth-child(3n) { stroke: var(--blue); stroke-width: .95; }
.atlas-marker-track { position: absolute; top: 12%; right: 24%; bottom: 12%; width: 1px; background: var(--rule); }
.atlas-marker-track span { position: absolute; top: 0; left: 50%; width: .7rem; height: .7rem; border: 1px solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); transform: translate(-50%, 0); }
.atlas-caption { position: absolute; right: .8rem; bottom: .7rem; padding: .15rem .3rem; background: var(--paper); }

.notes-stage { display: grid; min-height: clamp(220px, 26vw, 330px); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: 1fr auto; overflow: hidden; }
.note-art { position: relative; min-height: 180px; overflow: hidden; background: var(--paper-deep); }
.note-art svg { width: 100%; height: 100%; min-height: 180px; }
.note-art path:first-child { fill: #858078; }
.note-art path:nth-child(2) { fill: none; stroke: var(--paper); stroke-width: 1.2; }
.note-art path:nth-child(3) { fill: none; stroke: var(--ink); stroke-width: .8; }
.note-art-label { position: absolute; bottom: .6rem; left: .7rem; padding: .15rem .25rem; color: var(--paper); background: var(--ink); }
.note-art--botanical { background: #e4e0d4; }
.note-art--botanical path:first-child { fill: none; stroke: var(--green); stroke-width: 2; }
.note-art--grid { background: #ddd9cf; }
.note-art--grid path:first-child { fill: none; stroke: var(--blue); stroke-width: 1; }
.note-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 2.2vw, 2rem); border-left: 1px solid var(--rule-light); }
.note-content .blue-label { margin-bottom: .75rem; }
.note-content h4 { margin-bottom: .75rem; font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.35rem); line-height: 1.02; letter-spacing: -.025em; }
.note-content > p:last-child { max-width: 30ch; margin-bottom: 0; color: var(--ink-soft); font-size: .87rem; }
.note-pagination { grid-column: 1 / -1; display: flex; min-height: 3.1rem; align-items: center; justify-content: space-between; padding-inline: .85rem; border-top: 1px solid var(--rule-light); }
.note-controls { display: flex; gap: .3rem; }
.icon-button { display: inline-grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid transparent; border-radius: 0; background: transparent; cursor: pointer; transition: color var(--time-quick) var(--ease-quick), background-color var(--time-quick) var(--ease-quick), border-color var(--time-quick) var(--ease-quick), transform 140ms var(--ease-out); }
.icon-button:hover { border-color: var(--rule); }
.icon-button:active { transform: scale(.96); }

.feedback-form { min-height: clamp(220px, 26vw, 330px); padding: clamp(1rem, 2.5vw, 2rem); background: rgba(232, 227, 217, .3); }
.feedback-form > label,
.field-label { display: block; margin-bottom: .5rem; font-size: .84rem; }
.input-with-action { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.input-with-action input,
.text-field { width: 100%; min-height: 3rem; padding: .7rem .15rem; border: 0; border-radius: 0; color: var(--ink); background: transparent; }
.input-with-action input::placeholder { color: #5e5a52; opacity: 1; }
.input-with-action:focus-within { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.form-hint { display: block; margin: .4rem 0 0; color: var(--ink-soft); font-size: .76rem; }
.form-status { min-height: 1.5em; margin: 1rem 0 0; color: var(--ink-soft); font-size: .84rem; }
.feedback-form[data-state="valid"] .input-with-action { border-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.feedback-form[data-state="invalid"] .input-with-action { border-color: var(--red); box-shadow: 0 1px 0 var(--red); }
.feedback-form[data-state="valid"] .form-status { color: var(--green); }
.feedback-form[data-state="invalid"] .form-status { color: var(--red); }

.motion-stage { position: relative; height: clamp(185px, 23vw, 285px); overflow: hidden; background: rgba(232, 227, 217, .3); touch-action: pan-y; }
.motion-svg { width: 100%; height: 100%; }
.motion-svg path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.motion-svg path:nth-child(3n) { stroke: #716c63; stroke-width: .75; }
.motion-marker { position: absolute; top: 10%; bottom: 10%; left: 0; width: 1px; background: var(--red); pointer-events: none; transform: translateX(52%); }
.motion-marker::before { position: absolute; top: 50%; left: 50%; width: .7rem; height: .7rem; border: 1px solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); content: ""; transform: translate(-50%, -50%); }

.movement-section { background: rgba(232, 227, 217, .18); }
.motion-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.4vw, 3.5rem); }
.motion-demo { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.motion-demo-heading { display: flex; align-items: baseline; gap: 1rem; }
.motion-demo-heading h3 { margin: 0; font-family: var(--display); font-size: 1.75rem; line-height: 1.1; }
.motion-demo > p { min-height: 3.25rem; margin: .65rem 0 1.4rem; color: var(--ink-soft); font-size: .88rem; }
.press-demo { display: flex; align-items: center; gap: 1rem; }
.press-button { min-width: 9rem; }
.press-button.is-pressed { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.origin-demo { position: relative; width: max-content; max-width: 100%; }
.origin-trigger { min-width: 8rem; justify-content: space-between; }
.origin-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.origin-trigger svg { transition: none; }
.origin-panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + .35rem);
  left: 0;
  display: grid;
  min-width: 13rem;
  padding: .35rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  transform-origin: top left;
}
.origin-panel[hidden] { display: none; }
.origin-panel a { min-height: 2.6rem; display: flex; align-items: center; padding-inline: .75rem; text-decoration: none; font-size: .88rem; }
.origin-panel a:hover,
.origin-panel a:focus-visible { color: var(--red); background: rgba(182, 56, 43, .06); }
.reveal-stage { position: relative; height: 8.6rem; overflow: hidden; background: rgba(232, 227, 217, .35); }
.reveal-stage svg { width: 100%; height: 100%; }
.reveal-stage path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.reveal-stage .reveal-guide { stroke: var(--red); stroke-width: 1.35; }
.reveal-label { position: absolute; right: .45rem; bottom: .35rem; padding: .1rem .25rem; background: var(--paper); }
.reveal-stage[data-pending="true"] path:not(.reveal-guide) { stroke-dasharray: 900; stroke-dashoffset: 900; }
.reveal-stage.is-revealed path:not(.reveal-guide) { stroke-dashoffset: 0; transition: stroke-dashoffset 850ms var(--ease-out); }

.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); row-gap: clamp(2.5rem, 5vw, 4rem); }
.component-specimen { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.component-specimen h3 { margin-bottom: .25rem; font-family: var(--display); font-size: 1.55rem; line-height: 1.15; }
.component-specimen > p:not(.state-message) { margin-bottom: 1.2rem; color: var(--ink-soft); font-size: .83rem; }
.button-states { display: flex; flex-wrap: wrap; gap: .65rem; }
.button-states .button { min-height: 2.9rem; }
.component-fields .text-field,
.component-controls .text-field { display: block; border-bottom: 1px solid var(--rule); }
.component-fields .text-field:focus,
.component-controls .text-field:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.checkbox-label { display: flex; min-height: 2.75rem; align-items: center; gap: .7rem; margin-top: .55rem; font-size: .85rem; cursor: pointer; }
.checkbox-label input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.select-field { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%23171716' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .3rem center; background-size: 1rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.switch-row .field-label { margin: 0; }
.switch-control { position: relative; width: 3rem; height: 1.65rem; flex: 0 0 auto; padding: 0; border: 1px solid #78736a; border-radius: 99px; background: transparent; cursor: pointer; transition: background-color var(--time-control) var(--ease-quick), border-color var(--time-control) var(--ease-quick); }
.switch-control > span { position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ink); transition: transform 160ms var(--ease-out), background-color var(--time-control) var(--ease-quick); }
.switch-control[aria-checked="true"] { border-color: var(--blue); background: var(--blue); }
.switch-control[aria-checked="true"] > span { background: var(--paper); transform: translateX(1.3rem); }
.component-controls > .field-label output { float: right; color: var(--blue); font-family: var(--mono); font-size: .72rem; }
.state-message { display: flex; align-items: center; gap: .7rem; margin: .65rem 0; padding-block: .4rem; font-size: .84rem; }
.state-message--success { color: var(--green); }
.state-message--error { color: var(--red); }
.state-mark { display: inline-grid; width: 1.15rem; height: 1.15rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.state-mark svg { width: .72rem; height: .72rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.loader-row { display: flex; min-height: 2.8rem; align-items: center; gap: .8rem; margin-top: .7rem; }
.loader-trigger { min-height: 2.7rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.loader-trigger:disabled { color: var(--ink-soft); cursor: wait; }
.loader-dots { display: inline-flex; align-items: center; gap: .28rem; }
.loader-dots[hidden] { display: none; }
.loader-dots i { width: .34rem; height: .34rem; border-radius: 50%; background: var(--blue); animation: load-dots 850ms ease-in-out infinite alternate; }
.loader-dots i:nth-child(2) { animation-delay: 110ms; }
.loader-dots i:nth-child(3) { animation-delay: 220ms; }
@keyframes load-dots { to { opacity: .28; transform: translateY(-3px); } }

.method-section { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.method-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.method-steps li { min-width: 0; padding-top: .9rem; border-top: 1px solid var(--rule); }
.method-steps h3 { margin: .65rem 0 .35rem; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.method-steps p { max-width: 32ch; margin-bottom: 0; color: var(--ink-soft); font-size: .86rem; }
.method-principles { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-block: 1.5rem; border-block: 1px solid var(--rule); }
.method-principles h3 { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05; }
.method-principles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.method-principles li { position: relative; padding-left: 1rem; color: var(--ink-soft); font-size: .88rem; }
.method-principles li::before { position: absolute; top: .72em; left: 0; width: .35rem; height: 1px; background: var(--red); content: ""; }
.skills-strip { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: start; margin-top: clamp(3rem, 6vw, 5rem); }
.skills-strip .blue-label { margin-bottom: .7rem; }
.skills-strip h3 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.04; }
.skills-strip > div > p { margin: .55rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.skills-strip dl { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 0; }
.skills-strip dl > div { display: grid; grid-template-columns: minmax(10rem, .75fr) minmax(0, 1.25fr); gap: 1rem; padding-block: .5rem; border-bottom: 1px solid var(--rule-light); }
.skills-strip dt { font-family: var(--display); font-size: 1.15rem; }
.skills-strip dd { margin: 0; color: var(--ink-soft); font-size: .83rem; }
.technology-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 1.2rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.technology-note p { margin: 0; font-family: var(--display); font-size: 1.4rem; }
.technology-note .form-hint { margin: 0; text-align: right; }

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: 2.5rem;
  align-items: start;
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--rule);
}
.footer-brand > p { margin: .65rem 0 .75rem; color: var(--ink-soft); font-size: .88rem; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.25rem; }
.footer-nav a { color: var(--ink-soft); }
.footer-nav a:hover { color: var(--red); }
.back-to-top { display: grid; justify-items: center; gap: .65rem; text-decoration: none; font-size: .8rem; }
.back-to-top > span { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid var(--rule); border-radius: 50%; transition: color var(--time-quick) var(--ease-quick), background-color var(--time-quick) var(--ease-quick), transform 140ms var(--ease-out); }
.back-to-top:active > span { transform: scale(.96); }

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

@media (hover: hover) and (pointer: fine) {
  .primary-nav a:hover::after { transform: scaleX(1); }
  .button--outline:hover { color: var(--paper); border-color: var(--ink); background: var(--ink); }
  .button--accent:hover { border-color: #8e291f; background: #8e291f; }
  .button--ink:hover { color: var(--ink); background: transparent; }
  .text-link:hover { color: var(--red); }
}

@media (max-width: 1060px) {
  .site-header { grid-template-columns: auto 1fr; gap: .6rem 1.5rem; }
  .primary-nav { justify-content: flex-end; }
  .site-status { grid-column: 2; justify-self: end; margin-top: -.35rem; font-size: .72rem; }
  .hero { min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .approach-section { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
  .approach-note { grid-column: 2; }
  .approach-copy { grid-row: span 2; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 1.2rem; }
  html { scroll-padding-top: 8rem; }
  .site-header { grid-template-columns: 1fr auto; min-height: auto; gap: .7rem 1rem; padding-block: .8rem .6rem; }
  .brand { font-size: 1.7rem; }
  .site-status { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: .7rem; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 1.3rem; width: calc(100% + var(--page-gutter) * 2); margin-inline: calc(var(--page-gutter) * -1); padding: .15rem var(--page-gutter) .2rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { flex: 0 0 auto; font-size: .83rem; }
  .hero { grid-template-columns: 1fr; gap: 2.3rem; padding-block: 4rem 3.5rem; }
  .hero h1 { max-width: 8ch; font-size: clamp(3.4rem, 14vw, 5.6rem); }
  .hero-intro { max-width: 34ch; font-size: 1.28rem; }
  .hero-field { padding: .7rem; }
  .hero-canvas-wrap { height: min(65vw, 330px); min-height: 220px; }
  .specimen-footline { grid-template-columns: 1fr auto; gap: .15rem .7rem; }
  .specimen-footline label { grid-column: 1; }
  .specimen-footline input { grid-row: 2; grid-column: 1; }
  .specimen-footline .mono-note { grid-row: 2; grid-column: 2; }
  .approach-section { grid-template-columns: 1fr; gap: 1.4rem; padding-block: 3.2rem; }
  .approach-section h2 { font-size: clamp(2.7rem, 11vw, 4.2rem); }
  .approach-copy { grid-row: auto; }
  .approach-note { grid-column: auto; max-width: 30rem; }
  .experiences-section,
  .movement-section,
  .components-section,
  .method-section { padding-block: 3.5rem; }
  .section-intro { display: block; margin-bottom: 2.2rem; }
  .section-intro h2 { font-size: clamp(2.75rem, 11vw, 4.4rem); }
  .section-aside { margin-top: 1rem; text-align: left; }
  .section-subtitle { margin-top: .6rem; font-size: 1.1rem; }
  .experiment-grid { grid-template-columns: 1fr; row-gap: 2.8rem; }
  .type-stage { min-height: 240px; }
  .pulse-word { font-size: clamp(6rem, 26vw, 10rem); }
  .orbit-stage, .atlas-stage { height: min(72vw, 310px); min-height: 230px; }
  .notes-stage { min-height: 250px; }
  .note-art { min-height: 175px; }
  .note-content { padding: 1.1rem; }
  .note-content h4 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .feedback-form { min-height: 230px; padding: 1.25rem; }
  .motion-stage { height: 220px; }
  .motion-demos { grid-template-columns: 1fr; gap: 2.2rem; }
  .motion-demo > p { min-height: 0; max-width: 42ch; margin-bottom: 1rem; }
  .press-demo { min-height: 3rem; }
  .reveal-stage { height: 9rem; }
  .component-grid { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .method-principles { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.8rem; }
  .method-principles ul { grid-template-columns: 1fr; gap: .55rem; }
  .skills-strip { grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.8rem; }
  .skills-strip dl > div { grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr); }
  .technology-note { grid-template-columns: auto 1fr; gap: .5rem 1rem; margin-top: 2rem; }
  .technology-note .form-hint { grid-column: 2; text-align: left; }
  .site-footer { grid-template-columns: 1fr auto; gap: 1.8rem 1rem; padding-block: 2rem; }
  .footer-nav { grid-row: 2; grid-column: 1 / -1; max-width: 25rem; }
  .back-to-top { grid-column: 2; grid-row: 1; }
}

@media (max-width: 390px) {
  :root { --page-gutter: 1rem; }
  .site-status { max-width: 9.5rem; white-space: normal; line-height: 1.3; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .experiment-heading { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .note-content { padding: .85rem; }
  .note-content > p:last-child { font-size: .78rem; }
  .method-steps h3 { font-size: 1.5rem; }
  .method-steps p { font-size: .8rem; }
  .skills-strip dl > div { grid-template-columns: 1fr; gap: .05rem; }
  .technology-note p { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-stage[data-pending="true"] path:not(.reveal-guide) { stroke-dashoffset: 0; }
}