/* The lab page: every learning prototype as a small card, five to a row. */
:root {
  --paper: #f4f0e8;
  --paper-deep: #ece7db;
  --ink: #17150f;
  --ink-soft: rgba(23, 21, 15, 0.62);
  --ink-faint: rgba(23, 21, 15, 0.18);
  --accent: #e60000;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Archivo", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

.lab-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.4rem var(--gutter); }
.lab-wordmark { font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration: none; }
.lab-wordmark .dot, .accent { color: var(--accent); }
.lab-back { text-decoration: none; color: var(--ink-soft); }
.lab-back:hover { color: var(--accent); }

.lab-hero { max-width: 90rem; margin: 0 auto; padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3.5rem); }
.lab-kicker { color: var(--accent); margin-bottom: 1.25rem; }
.lab-title { font-weight: 500; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1; letter-spacing: -0.03em; }
.lab-title em { font-weight: 400; }
.lab-sub { max-width: 40rem; margin-top: 1.5rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-soft); }

.lab-grid-wrap { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem); }
.lab-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--ink-faint); border: 1px solid var(--ink-faint);
}
.lab-card { display: flex; flex-direction: column; background: var(--paper); text-decoration: none; color: inherit; overflow: hidden; transition: background 0.3s; }
.lab-card:hover, .lab-card:focus-visible { background: var(--paper-deep); }
.lab-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-deep); }
.lab-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) { .lab-card:hover .lab-card-img img { transform: scale(1.05); } }
.lab-card-body { display: flex; flex-direction: column; gap: 0.4rem; padding: clamp(0.9rem, 1.4vw, 1.2rem); }
.lab-card-title { font-family: var(--serif); font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.15; transition: color 0.25s; }
.lab-card:hover .lab-card-title, .lab-card:focus-visible .lab-card-title { color: var(--accent); }
.lab-card-meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.lab-note { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter) 3rem; color: var(--ink-soft); }
.lab-footer { border-top: 1px solid var(--ink-faint); padding: 1.5rem var(--gutter); color: var(--ink-soft); }
.lab-footer a { text-decoration: none; }
.lab-footer a:hover { color: var(--accent); }

@media (max-width: 1200px) { .lab-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px)  { .lab-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .lab-grid { grid-template-columns: repeat(2, 1fr); } }