/* Home page — from Figma "home page" (node 1592:4864). This replaces an
   earlier looping photo-collage hero (node 966:2501) with a plain
   headline + subtitle; the work section below is unchanged in structure,
   just widened to match the new frame's larger card size. */

/* the home page scrolls (unlike the fixed-viewport about page) so the work
   section below the hero is reachable; shared.css hides overflow globally,
   so this overrides it back on for just this page. */
body {
  overflow-y: auto;
  overflow-x: hidden;
}

.home-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: 145px 30px 0;
  box-sizing: border-box;
}

.home-hero-title {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
  color: #ff7800;
  margin: 0;
}

.home-hero-subtitle {
  margin: 20px 0 0;
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 15px;
  color: #7b7b7b;
  white-space: nowrap;
}

/* ---------- work section: case-study thumbnails below the hero ---------- */

.work-section {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: 60px 30px 120px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  scroll-margin-top: 45px; /* offset for the fixed nav bar when jumped to via #work */
}

/* 30px matches the case-study pages' own side gutter (see casestudy.css),
   so the margin doesn't visibly jump when you click into a case study.
   Held at every width — not just below 900px — so the centered box never
   touches the viewport edges on its own between 900px and ~1420px. */
@media (max-width: 900px) {
  .work-section {
    grid-template-columns: 1fr;
  }
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
}

/* the meta/title/desc trio reads as one tight caption block in Figma
   (~6px between lines) — much closer than the 14px gap between the
   cover image and the caption block above it. */
.work-caption {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* direct-child only — a plain descendant selector here also matches the
   eye/bee/M icon SVGs nested inside .work-card-cover, forcing them to
   width:100% (clobbering their own percentage sizing in shared.css and
   breaking the composition's responsive scaling) and rounding their
   corners with border-radius. */
.work-card > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* IBM cover: composited from Figma's 3 icon SVGs (vector, so it stays
   crisp) instead of a flat raster export — the source frame is only
   521x296 in Figma, too small to export a sharp PNG at card width.
   The icon-positioning classes (.ibm-icons etc) live in shared.css since
   the ibm case study page reuses this same composition for its own,
   larger cover. */
.work-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 521 / 296;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.work-meta {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #7b7b7b;
  text-transform: uppercase;
}

.work-title {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 25px;
  color: #5e5e5e;
}

.work-desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.1;
  color: #787878;
}