/* =========================================================
   LANDING PAGE (warm-paper, light palette)
   ========================================================= */

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100%;
}

body {
  font-family: var(--font-serif);
}

/* Nav shares the .nav style from base.css — no landing variant needed. */

/* ---------- Hero band ---------- */

.hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  min-height: calc(100vh - 62px); /* subtract nav bar height */
}

/* Piano video slice: a strip with a FIXED-aspect video inside so the
   visible hammer band stays constant regardless of window width.
   Video is 1400 x heightOfStrip (very wide aspect), centered
   horizontally in the strip so `object-fit: cover` on it always crops
   the same hammer band. */
.hero-video-strip {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.hero-video-strip video,
.hero-video-strip .det-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  max-width: none;   /* override the global img/video max-width: 100% */
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  display: block;
}

.hero-video-strip .det-overlay {
  pointer-events: none;
  z-index: 2;
}

/* Clearance band: piano-roll bars fall from strikes into the substrate below.
   Canvas fills the band; the canvas is what shows the bars in motion. */
.hero-clearance {
  position: relative;
  height: 48px;
  background: var(--bg-primary);
  flex-shrink: 0;
  display: block;
  line-height: 0;
  overflow: hidden;
}

.hero-clearance canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Game of Life zone: fills the remaining hero band */
.hero-gol {
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
  background: var(--bg-secondary);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Overlay card floats on the GoL zone */
.hero-overlay {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 780px;
  width: min(780px, calc(100% - var(--space-lg) * 2));
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(28, 27, 31, 0.08);
}

.hero-affiliation {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  margin-bottom: var(--space-md);
  line-height: 1.55;
  letter-spacing: 0.2px;
}

.hero-intro {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  font-weight: 400;
}

.hero-intro a,
.hero-quip a {
  color: var(--accent-primary);
  border-bottom: 1px solid rgba(166, 132, 78, 0.35);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.hero-intro a:hover,
.hero-quip a:hover {
  color: #7d5f2e;
  border-color: #7d5f2e;
}

.hero-quip {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  margin-bottom: 0;
  line-height: 1.55;
}

/* Scroll indicator at the bottom of the hero */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll:hover {
  color: var(--accent-primary);
}

.hero-scroll-chev {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-cta {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--accent-primary);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.hero-cta:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.hero-cta--muted {
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.hero-cta--muted:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* Animation controls: overlaid on the piano video (top-right) so
   they are visible against the dark hammer band rather than lost
   at the bottom of the hero. */
.hero-controls {
  position: absolute;
  right: var(--space-md);
  top: var(--space-md);
  z-index: 5;
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - var(--space-md) * 2);
  pointer-events: auto;
}

.hero-ctrl {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: rgba(250, 248, 243, 0.95);
  background: rgba(28, 27, 31, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(250, 248, 243, 0.35);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  letter-spacing: 0.3px;
}

.hero-ctrl:hover {
  color: white;
  border-color: rgba(250, 248, 243, 0.75);
  background: rgba(28, 27, 31, 0.75);
}

.hero-ctrl[aria-pressed="true"] {
  color: var(--accent-primary);
  border-color: rgba(166, 132, 78, 0.7);
  background: rgba(28, 27, 31, 0.8);
}

/* ---------- Generic section frame ---------- */

.section {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.section:nth-of-type(even) {
  background: var(--bg-secondary);
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.section-head {
  margin-bottom: var(--space-lg);
}

.section-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-tag {
  font-family: var(--font-mono);
  color: var(--accent-primary);
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.section-lede {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin-top: var(--space-sm);
}

.section-more {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
}

/* ---------- News list (expandable) ---------- */

.news-toggle-row {
  padding-top: var(--space-md);
  border-bottom: none !important;
  list-style: none;
}

.news-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.4px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.news-toggle:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: rgba(166, 132, 78, 0.04);
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.news-item {
  display: grid;
  grid-template-columns: 130px 90px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.news-item:last-child { border-bottom: none; }

.news-date {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.news-kind {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 3px;
  justify-self: start;
  border: 1px solid transparent;
}

.news-kind--paper   { color: var(--accent-blue);   border-color: rgba(77, 123, 166, 0.35); }
.news-kind--writing { color: var(--accent-primary); border-color: rgba(166, 132, 78, 0.35); }
.news-kind--book    { color: var(--accent-purple); border-color: rgba(122, 93, 140, 0.35); }
.news-kind--talk    { color: var(--accent-cyan);   border-color: rgba(77, 132, 120, 0.35); }
.news-kind--demo    { color: var(--accent-green);  border-color: rgba(95, 138, 79, 0.35); }
.news-kind--code    { color: var(--accent-red);    border-color: rgba(160, 85, 72, 0.35); }

.news-body a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 1px;
}

.news-body a:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.news-note {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.news-item--skeleton {
  color: var(--text-muted);
  font-style: italic;
  display: block;
}

/* ---------- Identity tiles ---------- */

.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.identity-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

.identity-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.identity-role {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
  text-transform: lowercase;
}

.identity-tile:nth-child(1) .identity-role { color: var(--accent-blue); }
.identity-tile:nth-child(2) .identity-role { color: var(--accent-red); }
.identity-tile:nth-child(3) .identity-role { color: var(--accent-green); }
.identity-tile:nth-child(4) .identity-role { color: var(--accent-purple); }

.identity-blurb {
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  flex-grow: 1;
  margin: 0;
}

.identity-arrow {
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: var(--space-md);
  align-self: flex-end;
  transition: color 0.2s, transform 0.2s;
}

.identity-tile:hover .identity-arrow {
  color: var(--accent-primary);
  transform: translateX(2px);
}

/* ---------- Labs ---------- */

.labs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}

.lab-card {
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  transition: transform 0.2s, border-color 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lab-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.lab-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.lab-card-img--contain {
  object-fit: contain;
  padding: var(--space-lg);
}

.lab-card > .lab-name,
.lab-card > .lab-blurb,
.lab-card > .lab-link {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.lab-card > .lab-name  { padding-top: var(--space-md); }
.lab-card > .lab-link  { padding-bottom: var(--space-lg); }

.lab-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
}

.lab-alias {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 400;
}

.lab-blurb {
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.lab-link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
}

/* ---------- Recent writing ---------- */

.writing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.writing-item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.writing-item:last-child { border-bottom: none; }

.writing-item a {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  color: var(--text-primary);
}

.writing-date {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.writing-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s;
}

.writing-item a:hover .writing-title {
  color: var(--accent-primary);
}

.writing-excerpt {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--space-xs);
}

.writing-item--skeleton {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Strip (team + videos) ---------- */

.strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.strip-card {
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  transition: transform 0.2s, border-color 0.2s;
}

.strip-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.strip-role {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.strip-blurb {
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: var(--space-md);
}

.strip-arrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
}

/* ---------- Footer ---------- */

.footer {
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.ext-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.ext-link {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  transition: all 0.2s;
}

.ext-link:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.footer-note {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  /* Hero: let it grow to fit content. GoL zone gets a min-height
     below the flowing overlay so the substrate stays visible. */
  .hero {
    min-height: auto;
  }

  /* Mobile: shorter strip + smaller fixed video width. Video stays
     centered and cover-crops to the hammer band consistently. */
  .hero-video-strip {
    height: 200px;
  }
  .hero-video-strip video,
  .hero-video-strip .det-overlay {
    width: 900px;
    object-position: center 78%;
  }

  .hero-clearance { height: 32px; }

  /* Overlay: static flow so it sits at top of the GoL zone,
     letting the substrate render around and below it. */
  .hero-gol {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-lg);
  }
  .hero-overlay {
    position: static;
    transform: none;
    max-width: none;
    width: calc(100% - var(--space-md) * 2);
    padding: var(--space-md) var(--space-md);
    margin: 0 auto var(--space-lg);
  }
  .hero-intro { font-size: 1rem; }

  /* Controls stay inside the video strip; smaller on mobile so
     they don't dominate the small viewport. */
  .hero-controls {
    right: var(--space-sm);
    top: var(--space-sm);
  }
  .hero-ctrl {
    font-size: 10px;
    padding: 3px 6px;
  }

  .section { padding: var(--space-lg) var(--space-md); }
  .section-title { font-size: 1.2rem; }

  .news-item {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--space-xs);
  }
  .news-kind { grid-column: 2; justify-self: start; margin-bottom: var(--space-xs); }
  .news-body { grid-column: 1 / -1; }

  .writing-item a {
    grid-template-columns: 90px 1fr;
  }

  /* Landing labs grid: single column at mobile width. */
  .labs-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-intro { font-size: 0.95rem; }
}