:root {
  --landing-max: 1120px;
  --landing-gutter: clamp(20px, 4vw, 48px);
  --landing-header-height: 72px;
  --type-heading: clamp(1.625rem, 3.5vw, 2.25rem);
  --leading-heading: 1.15;
  --tracking-heading: -0.025em;
  --radius-interactive: 8px;
  --type-label-size: 0.8125rem;
  --type-label-weight: 700;
  --tracking-label: 0.08em;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Syne", var(--font-sans);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-surface);
  color: var(--color-text-on-surface);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-surface);
  color: var(--color-text-on-surface);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-surface);
}

a { color: inherit; }

a:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--landing-header-height);
  display: flex;
  align-items: center;
  padding: 0 32px;
  background: transparent;
}

.wordmark {
  color: var(--color-primary-strong);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
}

.wordmark-kueh { font-weight: 800; }
.wordmark-machine { font-weight: 600; }

.hero {
  position: relative;
  /* Shorter than the full viewport per direct instruction, so the section's
     bottom edge sits above the bottom of the browser window (the next
     section peeks in) instead of exactly filling it -- the hero image below
     crops to fit via object-fit: cover, same as it already does on any
     viewport whose aspect ratio doesn't match the photo's own.
     --hero-height is shared with .hero-artwork/img below rather than
     chaining percentage heights off this min-height: a percentage height on
     a child doesn't resolve against a parent sized only by min-height, so
     each of the three needs this same explicit value directly. */
  --hero-height: 88svh;
  min-height: var(--hero-height);
}

.hero-artwork {
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  background: #fff;
}

.hero-artwork img {
  display: block;
  width: 100%;
  height: var(--hero-height);
  object-fit: cover;
  /* The composition puts the two figures in the left half and the kueh
     lapis on the right -- biasing the crop left keeps both readable on a
     narrow/portrait viewport instead of `cover`'s default center crop
     losing the figures off the left edge. */
  object-position: 25% center;
}

.hero-enter {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 40px);
  transform: translateX(-50%);
}

.hero-enter-link {
  display: inline-flex;
  min-width: 220px;
  align-items: center;
  justify-content: center;
  padding: 11px 28px;
  border-radius: var(--radius-interactive);
  background: var(--color-primary-strong);
  color: var(--color-text-on-primary);
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.hero-enter-link:hover {
  background: var(--color-text-on-surface);
  color: var(--color-surface);
}

.about {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
}

.about-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 96px) var(--landing-gutter) clamp(52px, 6vw, 72px);
}

.about h2,
.people h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.about-copy {
  display: grid;
  gap: 24px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.about-copy p { margin: 0; }

.about-brief-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 11px 20px;
  border-radius: var(--radius-interactive);
  background: var(--color-surface);
  color: var(--color-primary-strong);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.about-brief-link:hover {
  background: var(--color-text-on-surface);
  color: var(--color-surface);
}

.about-batik {
  position: absolute;
  z-index: 0;
  top: -60px;
  bottom: -60px;
  width: 220px;
  opacity: 0.2;
  pointer-events: none;
}

.about-batik svg { width: 100%; height: 100%; }

.about-batik--left { left: clamp(-180px, calc(-60px - (1200px - 100vw) * 0.2143), -60px); }
.about-batik--right { right: clamp(-180px, calc(-60px - (1200px - 100vw) * 0.2143), -60px); }

.people {
  background: #fff;
}

.people-inner {
  width: min(100%, var(--landing-max));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--landing-gutter) 56px;
}

.contributor-list,
.thanks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contributor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 7vw, 88px);
}

.contributor-list li {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
}

.contributor-list span {
  font-weight: 400;
}

.contributor-list a {
  justify-self: start;
  color: var(--color-primary-strong);
  font-family: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.contributor-list a:hover {
  color: var(--color-text-on-surface);
}

.director-credit {
  /* Same clamp() .thanks uses for its own margin-top below, so the gap
     above Leonard's credit (from the contributor list) matches the gap
     below it (to the Special Thanks heading) exactly. */
  margin: clamp(72px, 9vw, 112px) 0 0;
}

.thanks {
  margin-top: clamp(72px, 9vw, 112px);
}

.thanks h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.thanks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--color-text-on-surface-muted);
}

.site-footer {
  padding: 28px 32px;
  background: var(--color-primary-strong);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--color-text-on-primary);
  font-size: 0.8125rem;
}

@media (max-width: 700px) {
  :root { --landing-header-height: 64px; }

  .landing-header { padding: 0 20px; }

  .about-batik { display: none; }

  .about-inner,
  .people-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contributor-list li {
    min-height: 76px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
  }

  .contributor-list {
    grid-template-columns: 1fr;
  }

  .thanks ul {
    display: grid;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}