@font-face{font-family:"Big Shoulders Display";font-weight:400;font-display:swap;src:url("fonts/big-shoulders-display-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url("fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}
:root{
  --paper:#dfe4de; --paper-2:#cfd6cf; --ink:#18221e; --ink-soft:#4a5a53; --cobalt:#2b3fe0; --line:rgba(24,34,30,.16); --grid:rgba(24,34,30,.06);
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif; --text:"Atkinson Hyperlegible",Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(120vw 60vh at 85% -10%,rgba(43,63,224,.10),transparent 60%),
  repeating-linear-gradient(90deg,transparent 0 calc(12.5vw - 1px),var(--grid) calc(12.5vw - 1px) 12.5vw)}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.wrap{width:min(1400px,100% - 6vw);margin-inline:auto}
/* masthead */
.mast{padding:6vh 0 4vh}
.mast h1{font-family:var(--display);font-weight:900;font-size:clamp(4.5rem,17vw,16rem);line-height:.82;letter-spacing:-.01em;display:flex;flex-wrap:wrap;gap:0 .18em}
.mast h1 .w{display:inline-flex;overflow:hidden;padding-bottom:.04em}
.mast h1 .c{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease-out) forwards}
.mast h1 .lab{color:var(--cobalt)}
@keyframes rise{to{transform:none}}
.mast p{max-width:38em;margin-top:1.6rem;color:var(--ink-soft);font-size:1.05rem;opacity:0;animation:fade .8s .7s var(--ease-out) forwards}
@keyframes fade{to{opacity:1}}
/* experiment list */
.log{list-style:none;border-top:2px solid var(--ink);margin-bottom:10vh}
.log li{border-bottom:1px solid var(--line)}
.entry{display:grid;grid-template-columns:minmax(5rem,9rem) 1fr minmax(220px,36%);gap:2.2rem;align-items:center;padding:2rem 0;text-decoration:none;opacity:0;animation:fade .7s var(--ease-out) forwards}
.num{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,8vw,7rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .25s ease}
.meta time{font-size:.9rem;color:var(--ink-soft)}
.meta h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.95;margin:.35rem 0 .6rem}
.meta p{color:var(--ink-soft);max-width:34em}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border-radius:2px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .entry:hover .num{color:var(--cobalt);-webkit-text-stroke-color:var(--cobalt)}
  .entry:hover .thumb img{transform:scale(1.04)}
}
.foot{padding:0 0 6vh;color:var(--ink-soft);font-size:.9rem}
@media (max-width:820px){
  .entry{grid-template-columns:1fr;gap:1rem}
  .num{font-size:3.2rem}
}
@media (prefers-reduced-motion:reduce){
  .mast h1 .c,.mast p,.entry{animation:none;transform:none;opacity:1}
}
/* experiment pages */
.exp-head{padding:4vh 0 3vh;border-bottom:2px solid var(--ink);margin-bottom:3vh}
.back{font-size:.95rem;text-decoration:none;border-bottom:1px solid currentColor}
.exp-head h1{font-family:var(--display);font-weight:900;font-size:clamp(3rem,8vw,7rem);line-height:.85;margin-top:1.4rem}
.exp-head .n{color:var(--cobalt)}
.exp-head p{max-width:44em;margin-top:1rem;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:2.4rem 2rem;margin-bottom:6vh}
.piece .screen{aspect-ratio:16/9;background:#0d0f14;overflow:hidden;border-radius:2px}
.piece iframe{width:100%;height:100%;border:0;display:block}
.piece figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem;font-size:.95rem}
.piece figcaption b{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1}
.piece figcaption span{color:var(--ink-soft)}
.notes{max-width:44em;margin-bottom:8vh}
.notes h2{font-family:var(--display);font-weight:800;font-size:2rem;margin-bottom:.6rem}
.notes p+p{margin-top:.8rem}