:root{--paper:#f8f5ee;--ink:#103747;--muted:#5e7075;--copper:#ad542c;--rule:#d5d4ca}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--copper);outline-offset:5px}header,main,footer{max-width:1560px;margin:auto}header{padding:25px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);gap:24px}.brand{font:38px Georgia,serif;letter-spacing:-1.6px}.brand span{color:var(--copper)}.header-note,.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px}.header-note{color:var(--muted);font-size:12px}.header-links{display:flex;align-items:center;gap:28px}.text-link{font-size:14px}.text-link span{margin-left:12px;color:var(--copper)}main{padding:0 5%}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding:46px 0 25px}.eyebrow{color:var(--copper);margin:0 0 20px}h1{font:clamp(40px,4.3vw,66px)/1.07 Georgia,serif;letter-spacing:-2px;margin:0}h1 em{font-weight:normal;font-style:italic}.intro-copy{max-width:330px;font-size:17px;line-height:1.6;margin:0 0 4px}.intro-copy span{display:block;margin-top:12px;color:var(--muted);font-size:14px}.lab{border-top:1px solid var(--rule)}.stage{height:clamp(310px,37vw,510px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#fffdf700, #f8f5ee)}canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}canvas.dragging{cursor:grabbing}.stage-top,.stage-bottom{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;z-index:1}.stage-top{top:18px}.stage-bottom{bottom:20px;font-size:12px;color:var(--muted)}.stage-top button,.stage-bottom button{pointer-events:auto}.stage-label{font:19px Georgia,serif}.quiet{border:0;background:var(--paper);color:var(--ink);font-size:14px;padding:8px 12px}.legend{display:flex;gap:20px;align-items:center}.legend>span:first-child{display:flex;align-items:center;gap:8px;font-size:13px}.legend i{width:22px;height:2px;background:linear-gradient(90deg,var(--ink),var(--copper))}#motion-status{font-size:10px;letter-spacing:1.3px}.controls{display:grid;grid-template-columns:1fr 1fr auto;gap:50px;align-items:center;padding:27px 0 22px;border-top:1px solid var(--rule)}.control label{display:flex;justify-content:space-between;gap:15px;font-size:14px}.control output{color:var(--copper);font-variant-numeric:tabular-nums}.control input{display:block;width:100%;height:22px;margin:14px 0 5px;accent-color:var(--ink);cursor:pointer}.control p{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:0}.primary{border:1px solid var(--ink);background:var(--ink);color:#fffdf5;padding:17px 22px;font-size:14px;min-width:180px;display:flex;justify-content:space-between;gap:25px}.primary:hover{background:#215367}.advanced-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px}#advanced{padding:23px 0;border-top:1px solid var(--rule)}[hidden]{display:none!important}.select-control label{display:block;font-size:14px;margin-bottom:10px}select{width:100%;padding:10px;color:var(--ink);background:transparent;border:1px solid var(--rule);font-size:14px}.advanced-note{font-size:13px;color:var(--muted);margin-bottom:0}.experiments{display:flex;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--rule);flex-wrap:wrap}.experiments>span{font-size:11px;letter-spacing:1.7px;margin-right:16px;color:var(--muted)}.experiments button{border:1px solid var(--rule);border-radius:30px;background:transparent;color:var(--ink);padding:9px 17px;font-size:14px}.experiments button:hover,.experiments button.active{border-color:var(--copper);color:var(--copper);background:#ad542c08}.experiments .reset{margin-left:auto;border:0}#insight{font-size:14px;color:var(--muted);line-height:1.6;min-height:2em;margin:18px 0 28px}.explanation{border-top:1px solid var(--rule);padding:62px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:12%}h2{font:42px/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 24px}.explanation p{font-size:16px;line-height:1.7;color:var(--muted);max-width:440px}.explanation-right article{display:flex;gap:22px;margin-bottom:25px}.number{font:italic 24px Georgia,serif;color:var(--copper)}h3{font:22px Georgia,serif;margin:0}.explanation-right p{margin:8px 0 0}details{border-top:1px solid var(--rule);padding-top:19px}summary{cursor:pointer;font-size:14px;list-style:none;display:flex;justify-content:space-between}.math{padding:12px 0}.math p:first-child{font-family:Georgia,serif;font-size:20px;color:var(--ink)}.math p:last-child{font-size:14px}footer{padding:27px 5%;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:25px}footer .brand{font-size:29px}footer>span{font-size:12px;color:var(--muted)}footer>span:last-child{letter-spacing:1px}#render-error{position:absolute;top:40%;left:20%;right:20%;line-height:1.6;background:var(--paper);padding:20px}@media(min-width:1500px){.stage{height:470px}}@media(max-width:800px){.header-note{display:none}.intro{align-items:flex-start}.intro-copy{max-width:220px;font-size:15px}.controls{gap:24px;grid-template-columns:1fr 1fr}.primary{grid-column:1/-1;justify-self:start;padding:12px 18px}.gesture{display:none}.explanation{gap:35px}.advanced-grid{grid-template-columns:1fr 1fr}.select-control{grid-column:1/-1}footer>span:last-child{display:none}}@media(max-width:540px){header{padding:20px 6%}.brand{font-size:31px}.text-link{font-size:12px}main{padding:0 6%}.intro{display:block;padding-top:30px}.eyebrow{font-size:10px;letter-spacing:1.5px}h1{font-size:42px;letter-spacing:-1.5px}.intro-copy{max-width:none;margin-top:22px}.intro-copy span{display:none}.stage{height:320px}.stage-label{font-size:16px}.stage-bottom{bottom:12px}#motion-status{display:none}.stage-bottom .quiet{font-size:12px}.controls{grid-template-columns:1fr;gap:22px}.primary{justify-self:stretch}.experiments{gap:7px}.experiments>span{width:100%;margin-bottom:4px}.experiments button{font-size:12px;padding:9px 12px}.experiments .reset{margin-left:0}.explanation{grid-template-columns:1fr;padding:38px 0;gap:20px}h2{font-size:37px}.advanced-grid{grid-template-columns:1fr}.select-control{grid-column:auto}footer{align-items:flex-start;flex-direction:column;gap:12px;padding:25px 6%}#render-error{left:5%;right:5%}}@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wave-orbit{display:none}
}

/* Section pages */
.page{padding:56px 0 90px;max-width:920px}
.page h1{margin:0 0 18px}
.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:540px;margin:0}
.collection{margin-top:48px;border-top:1px solid var(--rule)}
.entry{
  display:grid;grid-template-columns:4.2rem 1fr;gap:8px 18px;
  padding:28px 0;border-bottom:1px solid var(--rule);align-items:start;
}
a.entry:hover h2{color:var(--copper)}
.entry .n{font:italic 22px Georgia,serif;color:var(--copper);padding-top:4px}
.entry h2{font:28px/1.15 Georgia,serif;letter-spacing:-.4px;margin:0 0 8px}
.entry p{margin:0;color:var(--muted);font-size:15px;line-height:1.65;max-width:none}
.entry .meta{display:block;margin-top:10px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--copper)}
.empty{margin-top:48px;padding:36px 0;border-top:1px solid var(--rule);color:var(--muted);font-size:16px;line-height:1.7;max-width:540px}
.prose{max-width:660px;margin-top:36px}
.prose h2{font:32px/1.15 Georgia,serif;letter-spacing:-.5px;margin:2.4rem 0 .9rem}
.prose p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 1.1rem;max-width:none}
.prose ul{margin:0 0 1.2rem;padding-left:1.15rem;color:var(--muted);line-height:1.7}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--muted)}
.footer-nav a:hover{color:var(--copper)}
@media(max-width:540px){
  .page{padding-top:34px}
  .entry{grid-template-columns:3rem 1fr}
  .entry h2{font-size:24px}
}

/* Home landing */
.home .site-header,
header.site-header{border-bottom:0;padding:20px 5% 8px}
.home .site-header{align-items:flex-start}
.home-hero{
  display:grid;
  grid-template-columns:minmax(220px,.62fr) minmax(420px,1.55fr);
  gap:20px 36px;
  align-items:start;
  padding:10px 0 18px;
}
.home-kicker{
  margin:0 0 14px;
  color:var(--copper);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.home-hero h1{
  font:clamp(34px,4.2vw,56px)/1.05 Georgia,serif;
  letter-spacing:-1.6px;
  margin:0 0 14px;
}
.home-hero h1 em{font-weight:normal}
.home-lead{
  max-width:340px;
  margin:0 0 22px;
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
}
.home-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:#fffdf5;
  padding:12px 18px;
  font-size:14px;
}
.home-cta:hover{background:#215367}
.home-visual{min-width:0;overflow:visible}
.home-stage{position:relative}
.home-visual canvas{
  width:100%;
  height:clamp(250px,32vw,400px);
  display:block;
  cursor:grab;
}
.wave-hint{
  position:absolute;
  left:16px;
  top:14px;
  bottom:auto;
  margin:0;
  z-index:2;
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
  letter-spacing:.01em;
}
.wave-orbit{
  position:absolute;
  right:12px;
  top:12px;
  bottom:auto;
  z-index:2;
  border:1px solid var(--rule);
  background:rgba(248,245,238,.88);
  color:var(--ink);
  font-size:12px;
  padding:6px 13px;
  border-radius:20px;
}
.wave-orbit:hover,
.wave-orbit[aria-pressed="true"]{
  border-color:var(--copper);
  color:var(--copper);
}
.wave-board{
  display:grid;
  grid-template-columns:minmax(220px,auto) repeat(3,minmax(96px,112px));
  justify-content:end;
  gap:2px 18px;
  align-items:start;
  margin:18px 0 0 auto;
  width:max-content;
  max-width:100%;
  overflow:visible;
}
.knob{text-align:center;position:relative;user-select:none;min-width:0}
.knob-name{
  display:block;
  font-size:12px;
  color:#6a7c81;
  margin-bottom:10px;
  line-height:1.25;
}
.knob-face{
  width:95px;
  height:95px;
  margin:0 auto;
  cursor:grab;
  touch-action:none;
  outline:none;
}
.knob-face:active,
.knob-face.is-dragging{cursor:grabbing}
.knob-face:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:50%}
.knob-ticks{stroke:#1a3d4a;stroke-width:1.25;stroke-linecap:round;opacity:.78}
.knob-arc{stroke:var(--copper);stroke-width:2.15;stroke-linecap:round}
.knob-disc{
  fill:#fffefb;
  stroke:#eadfce;
  stroke-width:.55;
  filter:drop-shadow(0 10px 16px rgba(16,55,71,.11)) drop-shadow(0 2px 3px rgba(16,55,71,.06));
}
.knob-shine{fill:#fff;opacity:.5;pointer-events:none}
.knob-pointer{stroke:#163a48;stroke-width:3.15;stroke-linecap:round}
.knob-hub{fill:#163a48}
.knob output{
  display:block;
  margin-top:10px;
  color:var(--copper);
  font-variant-numeric:tabular-nums;
  font-size:13.5px;
}
.knob-input{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.meet{
  padding:4px 28px 0 0;
  border-right:1px solid var(--rule);
  border-left:0;
  min-width:0;
  overflow:visible;
}
.meet-kicker{
  margin:0 0 16px;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#7a8b90;
}
.meet-row{display:flex;gap:8px;align-items:flex-start;overflow:visible}
.meet-btn{
  position:relative;
  flex:none;
  width:74px;
  height:66px;
  padding:8px 7px;
  border:1.5px solid transparent;
  border-radius:7px;
  background:#f3eee4;
  color:var(--ink);
  transition:border-color 140ms ease, background 140ms ease;
}
.meet-btn svg{width:100%;height:100%;display:block}
.meet-btn:hover{background:#f7f1ea}
.meet-btn.active{
  border-color:var(--copper);
  background:#f8f2ea;
}
.meet-tip{
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  width:max-content;
  max-width:168px;
  padding:8px 11px 9px;
  background:#163a48;
  color:#fffdf5;
  font-size:12px;
  line-height:1.35;
  border-radius:6px;
  z-index:4;
  text-align:left;
  pointer-events:none;
  box-shadow:0 10px 22px rgba(16,55,71,.2);
}
.meet-tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:8px;height:8px;
  background:#163a48;
  transform:translateX(-50%) rotate(45deg);
}
.meet-tip b{display:block;font-weight:600;margin-bottom:1px}
.meet-btn:hover .meet-tip,
.meet-btn:focus-visible .meet-tip{display:block}
.meet-reset{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  border:0;
  background:none;
  color:#163a48;
  font-size:14px;
  padding:0;
}
.meet-reset svg{width:16px;height:16px;flex:none}
.meet-reset:hover{color:var(--copper)}
.projects{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 24px;
  align-items:end;
  padding:28px 0 56px;
}
.projects h2{
  margin:0;
  font:clamp(24px,2.6vw,34px)/1.1 Georgia,serif;
  letter-spacing:-.6px;
}
.projects-all{
  font-size:13px;
  padding-bottom:4px;
  border-bottom:1px solid var(--ink);
}
.projects-all span{color:var(--copper);margin-left:6px}
.project-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,220px));
  justify-content:start;
  gap:16px;
  margin-top:12px;
}
.project-card h3{
  font:18px/1.2 Georgia,serif;
  margin:8px 0 4px;
  letter-spacing:-.3px;
}
.project-tag{
  margin:0;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
}
.project-art{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#efe8d8;
}
.project-art svg{width:100%;height:100%;display:block}
.project-card:hover h3{color:var(--copper)}
@media(max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:16px}
  .home-visual canvas{height:280px}
  .wave-board{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;margin-left:0;width:100%;gap:16px}
  .knob-face{width:82px;height:82px}
  .meet{padding:8px 0 0;border-right:0;grid-column:1/-1}
  .project-grid{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media(max-width:540px){
  .home-hero h1{font-size:36px;letter-spacing:-1.2px}
  .wave-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
  .knob-face{width:72px;height:72px}
  .knob-name{font-size:11px}
  .meet{grid-column:1/-1;padding:8px 0 0;border-right:0}
  .meet-btn{width:78px;height:62px}
  .wave-hint{font-size:11px;left:10px;top:10px}
  .project-grid{grid-template-columns:1fr;gap:18px}
  .projects{padding:24px 0 48px}
}