@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

:root {
  --ink: #111317;
  --paper: #f7f7f4;
  --white: #ffffff;
  --line: #d6d9de;
  --muted: #666c75;
  --blue: #1c55e5;
  --amber: #f4b942;
  --sans: 'Manrope', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset: 3px;
}

.lab-shell { min-height: 100vh; }

.lab-header {
  display: flex;
  min-height: 76px;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid #2d3138;
  background: var(--ink);
  color: var(--white);
}

.lab-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  color: inherit;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .13em;
  text-decoration: none;
}

.brand-block {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: var(--amber);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.06em;
}

nav { display: flex; align-items: stretch; }
nav a {
  display: flex;
  min-width: 112px;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #2d3138;
  color: #b4b8bf;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
nav a:hover { background: #1c1f24; color: var(--amber); }

main, footer { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }

.lab-intro {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 220px;
  gap: 34px;
  align-items: end;
  padding: 76px 0 62px;
  border-bottom: 1px solid var(--ink);
}

.intro-index, .lab-note span, .ledger-head span, .experiment-status, .experiment-tags, footer {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intro-index { align-self: start; padding-top: 13px; color: var(--blue); }
.lab-intro h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8.2vw, 8.2rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .8;
}
.lab-intro p { max-width: 720px; margin: 34px 0 0; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
.lab-note { padding: 18px 0 4px 22px; border-left: 1px solid var(--line); }
.lab-note span { display: block; margin-bottom: 9px; color: var(--muted); }
.lab-note strong { font-family: var(--serif); font-size: 1.35rem; }

.experiment-ledger { padding-top: 36px; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; }
.ledger-head h2 { margin: 0; font-family: var(--serif); font-size: 1.6rem; }
.ledger-head span { color: var(--blue); }

.experiment-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1.7fr) minmax(220px, .8fr) 60px;
  min-height: 220px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.experiment-card > span { padding: 26px 24px; }
.experiment-card > span + span { border-left: 1px solid var(--line); }
.experiment-card:hover { background: var(--ink); color: var(--white); }
.experiment-card:hover > span + span { border-left-color: #343840; }
.experiment-card:hover .experiment-status, .experiment-card:hover .experiment-description, .experiment-card:hover .experiment-tags { color: #b7bbc3; }
.experiment-number { font-family: var(--mono); font-size: .8rem; color: var(--blue); }
.experiment-main { display: flex; flex-direction: column; justify-content: center; }
.experiment-status { margin-bottom: 14px; color: var(--blue); }
.experiment-main strong { font-family: var(--serif); font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 600; letter-spacing: -.035em; line-height: .95; }
.experiment-description { margin-top: 17px; color: var(--muted); }
.experiment-tags { display: flex; flex-direction: column; justify-content: center; gap: 12px; color: var(--muted); }
.experiment-open { display: grid; place-items: center; font-size: 1.7rem; }

.principle-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 62px 0 100px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-strip div { display: flex; min-height: 110px; align-items: center; gap: 20px; padding: 22px 26px 22px 0; }
.principle-strip div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.principle-strip span { color: var(--blue); font-family: var(--mono); font-size: .7rem; }
.principle-strip strong { font-family: var(--serif); font-size: 1.3rem; }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 23px 0 30px; border-top: 1px solid var(--ink); color: var(--muted); }

@media (max-width: 820px) {
  .lab-header { min-height: 66px; }
  .lab-brand { padding: 0 16px; }
  nav a { min-width: auto; padding: 0 14px; }
  main, footer { width: min(100% - 36px, 1280px); }
  .lab-intro { grid-template-columns: 1fr; gap: 22px; padding: 52px 0 42px; }
  .intro-index { padding: 0; }
  .lab-note { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .experiment-card { grid-template-columns: 64px minmax(0, 1fr) 50px; }
  .experiment-tags { display: none; }
  .experiment-main strong { font-size: 3.5rem; }
}

@media (max-width: 560px) {
  .lab-brand > span:last-child { display: none; }
  nav a { padding: 0 10px; font-size: .62rem; }
  .lab-intro h1 { font-size: clamp(3.5rem, 19vw, 5rem); }
  .lab-intro p { margin-top: 26px; }
  .experiment-card { grid-template-columns: 46px minmax(0, 1fr); min-height: 250px; }
  .experiment-card > span { padding: 22px 12px; }
  .experiment-main { padding-inline: 18px !important; }
  .experiment-main strong { font-size: 3rem; }
  .experiment-open { display: none; }
  .principle-strip { grid-template-columns: 1fr; margin-bottom: 70px; }
  .principle-strip div { min-height: 82px; }
  .principle-strip div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  footer { display: block; }
  footer span { display: block; margin-bottom: 8px; }
}

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