@font-face {
  font-family:Fraunces;
  src:url('assets/experiments/fraunces.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face {
  font-family:Fraunces;
  src:url('assets/experiments/fraunces-italic.ttf') format('truetype');
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
}

:root {
  color-scheme:light;
  --paper:#f6f3e9;
  --ink:#27251f;
  --muted:#6c685f;
  --rule:#27251f40;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:style;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}

body {
  margin:0;
  background-image:linear-gradient(#27251f07 1px,transparent 1px),linear-gradient(90deg,#27251f07 1px,transparent 1px),linear-gradient(#27251f04 1px,transparent 1px),linear-gradient(90deg,#27251f04 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  min-width:320px;
}

body:after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9;
  opacity:.17;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.35' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

a {
  color:inherit;
}

button {
  font:inherit;
  color:inherit;
  touch-action:manipulation;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:5px;
}

button {
  cursor:pointer;
}

::selection {
  color:var(--paper);
  background:var(--ink);
}

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

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:14px;
  background:var(--paper);
  z-index:20;
  transform:translateY(-180%);
}

.skip-link:focus {
  transform:none;
}

.masthead {
  max-width:1440px;
  margin:auto;
  padding:29px 52px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--rule);
}

.signature {
  font-family:Fraunces,Georgia,serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.7px;
  text-decoration:none;
}

.signature span {
  display:block;
  font-family:Georgia,serif;
  font-size:11px;
  font-style:italic;
  font-weight:400;
  letter-spacing:.4px;
  margin-top:6px;
}

.index-link {
  font-size:14px;
  text-decoration:none;
}

.index-link span {
  font-size:24px;
  display:inline-block;
  margin-left:20px;
}

.index-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.laboratory {
  max-width:1320px;
  margin:0 auto;
  padding:25px 36px 0;
}

.plate-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--muted);
}

.apparatus {
  position:relative;
  width:min(100%,680px);
  margin:0 auto;
}

#machine {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  color:var(--ink);
}

.ink {
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linejoin:round;
  stroke-linecap:round;
  fill:none;
}

.paper-fill {
  fill:var(--paper);
}

.draft-lines {
  stroke:currentColor;
  stroke-width:.6;
  opacity:.2;
  fill:none;
}

.draft-lines>path:first-child {
  stroke-dasharray:9 5 2 5;
}

.draft-lines text {
  stroke:none;
  fill:currentColor;
  font-size:10px;
  font-style:italic;
}

.machine-labels {
  font-size:7px;
  fill:currentColor;
  letter-spacing:1.4px;
}









.machine-hotspot {
  position:absolute;
  padding:0;
  border:0;
  background:none;
  border-radius:50%;
  min-width:44px;
  min-height:44px;
}

.brain-hit {
  top:6%;
  left:36%;
  width:27%;
  height:21%;
}

.steam-hit {
  top:20%;
  left:75%;
  width:13%;
  height:12%;
}

.hotspot-caption {
  position:absolute;
  left:50%;
  top:90%;
  white-space:nowrap;
  transform:translate(-50%,4px) rotate(-3deg);
  font-size:12px;
  background:var(--paper);
  padding:5px 8px;
  border:1px solid var(--rule);
  opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;
}

.machine-hotspot:hover .hotspot-caption,.machine-hotspot:focus-visible .hotspot-caption {
  opacity:1;
  transform:translate(-50%,0) rotate(-3deg);
}

.machine-hotspot:hover {
  box-shadow:0 0 0 1px #27251f40;
}

.hero-caption {
  text-align:center;
  margin-top:12px;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2.1px;
  font-size:10px;
  font-weight:400;
  margin:0 0 14px;
  color:var(--muted);
}

h1,h2,h3 {
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'SOFT' 35,'WONK' 1;
}

h1 {
  font-size:clamp(58px,8.6vw,116px);
  font-weight:650;
  letter-spacing:-.07em;
  line-height:1.08;
  margin:0 0 18px;
}

h1:after {
  content:"";
  display:block;
  width:260px;
  max-width:60%;
  height:5px;
  margin:6px auto 0;
  border-bottom:1px solid var(--ink);
  border-radius:50%;
  transform:rotate(-1deg);
}

.tagline {
  font-size:23px;
  font-style:italic;
  margin:8px 0 23px;
}

.machine-controls {
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:center;
}

.machine-controls button {
  padding:9px 4px;
  min-height:44px;
  background:none;
  border:0;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px;
}

.machine-controls button:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

.machine-controls button[aria-pressed=true] {
  font-style:italic;
}

.control-divider {
  color:var(--muted);
}

.sound-icon {
  font-size:18px;
}

#motion-icon {
  font-size:15px;
  min-width:14px;
}

.interaction-hint {
  font-size:11px;
  font-style:italic;
  letter-spacing:.2px;
  color:var(--muted);
  margin:7px 0 15px;
}

.down-link {
  font-size:31px;
  text-decoration:none;
  display:inline-block;
  padding:10px 25px 24px;
  transition:transform .2s;
}

.down-link:hover {
  transform:translateY(5px);
}

.collection {
  max-width:1120px;
  margin:55px auto 0;
  padding:0 30px 76px;
  scroll-margin-top:30px;
}

.collection-heading {
  border-top:1px solid var(--ink);
  padding:30px 0 27px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
}

.collection-heading .eyebrow {
  margin-bottom:11px;
}

h2 {
  font-size:34px;
  letter-spacing:-1.3px;
  font-weight:500;
  margin:0;
}

.collection-count {
  font-size:12px;
  font-style:italic;
  color:var(--muted);
  padding-bottom:5px;
}

.experiment-list a {
  display:grid;
  grid-template-columns:35px 1fr 150px 25px;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--rule);
  padding:27px 8px 29px;
  text-decoration:none;
  transition:background .2s;
}

.experiment-list a:last-child {
  border-bottom:1px solid var(--rule);
}

.experiment-list a:hover {
  background:#27251f06;
}

.experiment-number {
  font-size:12px;
  color:var(--muted);
  align-self:start;
  padding-top:7px;
  font-style:italic;
}

h3 {
  font-weight:550;
  font-size:23px;
  letter-spacing:-.6px;
  margin:0 0 8px;
}

h3 em {
  font-size:17px;
  font-weight:400;
  display:inline-block;
  margin-left:6px;
}

h3 em:before {
  content:'— ';
  font-style:normal;
}

.experiment-list p {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  max-width:620px;
  margin:0;
}

.experiment-kind {
  font-size:11px;
  font-style:italic;
  text-align:right;
  color:var(--muted);
}

.experiment-arrow {
  font-size:25px;
  transition:transform .2s;
}

.experiment-list a:hover .experiment-arrow {
  transform:translate(3px,-3px);
}

.favourite {
  display:inline-block;
  margin-left:.22em;
  color:var(--ink);
  font-family:Georgia,serif;
  font-size:.58em;
  font-style:normal;
  line-height:1;
  vertical-align:.28em;
  transform:rotate(-7deg);
}

footer {
  max-width:1336px;
  margin:auto;
  padding:26px 0 32px;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:var(--muted);
  font-style:italic;
}

footer a {
  font-family:Fraunces,Georgia,serif;
  text-decoration:none;
  font-size:14px;
  font-style:normal;
  color:var(--ink);
}

footer .footer-name span {
  display:inline-block;
  margin-left:5px;
  font-size:17px;
  transition:transform .2s;
}

footer .footer-name:hover span {
  transform:translate(2px,-2px);
}

footer span:last-child span {
  font-size:20px;
  vertical-align:middle;
  margin-left:12px;
}

.brain-float {
  transform-origin:320px 110px;
}

.waterline {
  animation:water-sway 6s ease-in-out infinite;
}

.bubble {
  animation:rise var(--duration) linear infinite;
  animation-delay:var(--delay);
  transform-box:fill-box;
  transform-origin:center;
  stroke-width:1;
  fill:var(--paper);
}

.flask-bubble {
  animation-name:flask-rise;
}

@keyframes flask-rise {
  0% { transform:translateY(0) scale(.6); opacity:0; }
  20% { opacity:.85; }
  80% { opacity:.65; }
  100% { transform:translateY(-27px) scale(1.1); opacity:0; }
}

.steam-wisp {
  animation:steam-drift var(--duration) ease-out infinite;
  animation-delay:var(--delay);
  stroke-width:1.4;
  opacity:0;
}

.electricity {
  opacity:0;
  stroke-width:2.2;
}

.steam-burst {
  opacity:0;
  stroke-width:1.5;
}

.sparking .electricity {
  animation:spark .65s ease-out 2;
}

.venting .steam-burst {
  animation:vent 1.9s ease-out;
}

.motion-paused .brain-float,.motion-paused .waterline,.motion-paused .bubble,.motion-paused .steam-wisp,.motion-paused .electricity,.motion-paused .steam-burst {
  animation-play-state:paused;
}

.page-hidden * {
  animation-play-state:paused!important;
}

.motion-paused .steam-wisp,.motion-paused .steam-burst,.motion-paused .electricity {
  opacity:0!important;
}


@keyframes water-sway {
  0%,100% {
    transform:translateX(-4px);
  }
  50% {
    transform:translateX(3px);
  }
}

@keyframes rise {
  0% {
    transform:translate(0,0) scale(.5);
    opacity:0;
  }
  12% {
    opacity:.65;
  }
  85% {
    opacity:.65;
  }
  100% {
    transform:translate(2px,-113px) scale(1);
    opacity:0;
  }
}

@keyframes steam-drift {
  0% {
    transform:translateY(8px);
    opacity:0;
  }
  20% {
    opacity:.35;
  }
  100% {
    transform:translateY(-42px);
    opacity:0;
  }
}

@keyframes spark {
  0%,100% {
    opacity:0;
  }
  14%,45%,72% {
    opacity:.85;
  }
  28%,60%,85% {
    opacity:0;
  }
}

@keyframes vent {
  0% {
    opacity:0;
    transform:translateY(8px);
  }
  20% {
    opacity:.55;
  }
  100% {
    opacity:0;
    transform:translateY(-55px);
  }
}

@media(min-width:1500px) {
  .apparatus {
    width:700px;
  }
  .laboratory {
    padding-top:30px;
  }
}

@media(max-width:1100px) {
  .apparatus {
    width:600px;
  }
  footer {
    margin:0 30px;
  }
  .experiment-list a {
    grid-template-columns:30px 1fr 100px 23px;
    gap:18px;
  }
}

@media(max-width:760px) {
  .masthead {
    padding:22px 24px 19px;
  }
  .signature {
    font-size:19px;
  }
  .index-link {
    font-size:12px;
  }
  .index-link span {
    margin-left:8px;
    font-size:20px;
  }
  .laboratory {
    padding:21px 18px 0;
  }
  .plate-heading {
    font-size:8px;
    letter-spacing:1px;
  }
  .plate-heading span:last-child {
    display:none;
  }
  .apparatus {
    width:min(100%,570px);
    margin-top:15px;
  }
  .hero-caption {
    margin-top:8px;
  }
  h1 {
    font-size:clamp(57px,12.5vw,89px);
    margin-bottom:17px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.6px;
  }
  .tagline {
    font-size:20px;
  }
  .collection {
    margin-top:32px;
    padding:0 24px 50px;
  }
  .collection-heading {
    display:block;
    padding:24px 0;
  }
  h2 {
    font-size:29px;
  }
  .collection-count {
    display:block;
    margin-top:13px;
  }
  .experiment-list a {
    grid-template-columns:24px 1fr 21px;
    gap:14px;
    padding:23px 0;
  }
  .experiment-kind {
    display:none;
  }
  h3 {
    font-size:22px;
    line-height:1.35;
  }
  h3 em {
    display:block;
    margin:3px 0 0;
    font-size:15px;
  }
  .experiment-list p {
    font-size:13px;
  }
  .experiment-number {
    padding-top:5px;
  }
  footer {
    margin:0 24px;
    display:grid;
    grid-template-columns:1fr auto;
    line-height:1.5;
  }
  footer>.footer-name {
    grid-row:1;
    grid-column:1;
  }
  footer>span {
    grid-row:1;
    grid-column:2;
    font-size:10px;
  }
  footer>span>span {
    display:none;
  }
}

@media(max-width:380px) {
  .masthead {
    padding:19px 18px;
  }
  .signature {
    font-size:17px;
  }
  .signature span {
    font-size:9px;
  }
  .index-link {
    font-size:11px;
  }
  .index-link span {
    display:none;
  }
  .machine-controls {
    gap:10px;
  }
  .interaction-hint {
    font-size:10px;
  }
  .collection {
    padding-left:18px;
    padding-right:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
  }
}


/* Ink bubble stays inside the page on phones and does not intercept further taps. */
.brain-speech {
  position: absolute;
  z-index: 3;
  top: 5%;
  right: -9%;
  width: 235px;
  padding: 19px 22px;
  border: 1.6px solid var(--ink);
  border-radius: 47% 43% 46% 40% / 30% 37% 32% 40%;
  background: var(--paper);
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  transform: rotate(2deg);
  pointer-events: none;
}
.brain-speech::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 47%;
  width: 18px;
  height: 14px;
  background: var(--paper);
  border-left: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: skewY(-28deg) rotate(22deg);
}
.brain-speaking .brain-hit .hotspot-caption { opacity: 0; }
footer a.audio-credit { display: block; font-family: Georgia, serif; font-size: 10px; margin-top: 5px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
@media (max-width: 760px) {
  .brain-speech { top: 1%; right: 0; width: 42%; padding: 12px 13px; font-size: 13px; }
}