@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #f5f4f0;
  --text: #171717;
  --muted: #77756f;
  --line: #d7d5cf;
  --pad: clamp(22px, 4vw, 64px);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, Arial, sans-serif; font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.site-header {
  min-height: 82px; padding: 23px var(--pad); border-bottom: 1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:30px;
}
.brand-name,.eyebrow,.experiment-code,.experiment-meta,.archive-count,.archive-note > span,footer {
  font-family:"DM Mono",monospace; letter-spacing:.04em;
}
.brand-name { font-size:12px; font-weight:500; }
.brand-subtitle { margin-top:3px; font-size:10px; color:var(--muted); letter-spacing:.06em; }
main { width:min(1500px,100%); margin:0 auto; padding:0 var(--pad); }
.archive-heading {
  display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:end;
  padding:55px 0 48px; border-bottom:1px solid var(--line);
}
.eyebrow { margin:0 0 12px; font-size:9px; color:var(--muted); }
.archive-heading h1 {
  margin:0; font-size:clamp(28px,3.5vw,52px); line-height:1; font-weight:500; letter-spacing:-.045em;
}
.heading-note { max-width:320px; color:var(--muted); font-size:12px; line-height:1.6; }
.archive-controls {
  min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line);
}
.filter-group { display:flex; flex-wrap:wrap; gap:6px 25px; }
.filter {
  border:0; padding:0; background:transparent; color:var(--muted); cursor:pointer;
  font:500 9px "DM Mono",monospace; letter-spacing:.05em;
}
.filter:hover,.filter.is-active { color:var(--text); }
.filter.is-active::before { content:"● "; }
.archive-count { white-space:nowrap; color:var(--muted); font-size:9px; }
.archive { border-bottom:1px solid var(--line); }
.experiment {
  display:grid; grid-template-columns:48px minmax(250px,1.15fr) minmax(210px,.8fr) 165px;
  gap:28px; align-items:center; min-height:195px; padding:30px 0;
  border-bottom:1px solid var(--line); transition:padding .3s ease,background .3s ease;
}
.experiment:last-child { border-bottom:0; }
.experiment:hover { padding-left:10px; padding-right:10px; background:rgba(255,255,255,.35); }
.experiment-index { align-self:start; padding-top:3px; font:9px "DM Mono",monospace; color:var(--muted); }
.experiment-code { font-size:9px; color:var(--muted); margin-bottom:8px; }
.experiment h2 {
  margin:0; font-size:clamp(24px,2.5vw,38px); line-height:1; font-weight:500;
  letter-spacing:-.045em; text-transform:uppercase;
}
.experiment-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:19px; font-size:8px; color:var(--muted); }
.experiment-description { max-width:310px; color:var(--muted); font-size:12px; line-height:1.6; }
.experiment-link {
  justify-self:end; width:100%; display:flex; align-items:center; justify-content:space-between; gap:15px;
  padding:11px 0; border-bottom:1px solid var(--text); color:var(--text); text-decoration:none;
  font:500 9px "DM Mono",monospace; letter-spacing:.04em;
}
.experiment-link .arrow { font-size:15px; transition:transform .25s ease; }
.experiment-link:hover .arrow { transform:translate(4px,-4px); }
.archive-note { display:grid; grid-template-columns:1fr 2fr; gap:30px; padding:50px 0 75px; }
.archive-note > span { color:var(--muted); font-size:9px; }
.archive-note p { margin:0; max-width:500px; color:var(--muted); font-size:12px; }
footer {
  border-top:1px solid var(--line); padding:20px var(--pad); display:flex;
  justify-content:space-between; gap:20px; color:var(--muted); font-size:8px;
}
.experiment.is-hidden { display:none; }
@media(max-width:900px){
  .archive-heading{grid-template-columns:1fr;gap:18px}
  .heading-note{max-width:500px}
  .experiment{grid-template-columns:40px 1fr 150px;gap:20px}
  .experiment-description{display:none}
}
@media(max-width:640px){
  .site-header{min-height:72px}
  
  .archive-heading{padding:38px 0 35px}
  .archive-heading h1{font-size:30px}
  .archive-controls{align-items:flex-start;padding:18px 0;flex-direction:column}
  .archive-count{order:-1}
  .filter-group{gap:10px 18px}
  .experiment{grid-template-columns:28px 1fr;gap:9px 14px;min-height:0;padding:27px 0}
  .experiment:hover{padding-left:7px;padding-right:7px}
  .experiment h2{font-size:27px}
  .experiment-link{grid-column:2;justify-self:stretch;margin-top:12px}
  .archive-note{grid-template-columns:1fr;gap:12px}
  footer{flex-direction:column}
}

.main-menu-link{font:500 9px "DM Mono",monospace;letter-spacing:.05em;order:2;margin-left:auto}
.main-menu-link a{text-decoration:none;color:var(--muted)}
.main-menu-link a:hover{color:var(--text)}
.site-header .brand{order:1}
.site-header 
@media(max-width:640px){.main-menu-link{position:absolute;right:var(--pad);top:23px}.site-header{position:relative}.site-header .brand{padding-right:90px}}

/* Accent palette */
:root{--teal:#0f7774;--red:#b6403c}
.eyebrow,.experiment-code{color:var(--teal)!important}
.experiment-index{color:var(--red)!important}
.experiment-meta span:first-child{color:var(--teal)}
.experiment-meta span:nth-child(2){color:var(--red)}
.experiment-link:hover{color:var(--teal)}

.experiment-media{width:160px;height:100px;overflow:hidden;margin-right:20px}.experiment-media img{width:100%;height:100%;object-fit:cover;display:block}