/* Apie mus — frame `Apie mus` (347:12683), canvas 1728x3618. Offsets are frame-absolute
   values from design/figma-cache/frames/apie-mus.json, rebased on the section start (the
   header bottom, y72); the tile row starts at 2738, so the section is 2666px tall.
   Text tops are ink tops where Figma cap-trims (intro, quote, body, band claim). */

.ab { position: relative; height: 2666px; }

/* ---- Hero: Rectangle 6 (image) @0,72 + Rectangle 12 (gradient @70%) @0,156 ---- */
.ab__hero { position: relative; height: 809px; overflow: hidden; }
.ab__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab__hero::after {                                    /* Rectangle 12 — 1728x725 from y84 */
  content: ""; position: absolute; left: 0; right: 0; top: 84px; height: 725px; opacity: 0.7;
  background: linear-gradient(180deg, rgba(44, 36, 32, 0) 0%, #2c2420 100%);
}
.ab__tagline {                                        /* 366:4566 @489,369 — 750x216, 80/72 */
  position: absolute; left: 489px; top: 297px; width: 750px; margin: 0; z-index: 1;
  color: var(--cream); text-align: center; font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px;
}

.ab__crumbs {                                         /* Group 5516 @294,905 — 12/15.6 */
  position: absolute; left: 294px; top: 833px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.ab__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.ab__crumbs a:hover { color: var(--accent); }
.ab__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.ab__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

.ab__intro {                                          /* 435:5554 @499,1041 — 753x131, 16/24 */
  position: absolute; left: 499px; top: 963.4px; width: 753px; margin: 0;
  color: var(--ink); text-align: center; font-weight: 400; font-size: 16px; line-height: 24px;
}

.ab__photo {                                          /* Rectangle 11 @0,1292 — 864x686 */
  position: absolute; left: 0; top: 1220px; width: 864px; height: 686px; object-fit: cover;
}
.ab__quote {                                          /* 366:4527 @973,1448 — 32/41.7 ls3.2 */
  position: absolute; left: 973px; top: 1367px; width: 461px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}
.ab__body {                                           /* 366:4524 @973,1594 — 461x227, 16/24 */
  position: absolute; left: 973px; top: 1516.4px; width: 461px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 16px; line-height: 24px;
}

/* ---- Band: Rectangle 2973 @0,2098 — 1728x640, the brand line over a photo ---- */
.ab__band { position: absolute; left: 0; top: 2026px; width: 1728px; height: 640px; overflow: hidden; }
.ab__band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab__band-title {                                     /* 435:5567 @535,2364 — 659x72, 80/72 */
  position: absolute; left: 535px; top: 266px; width: 659px; margin: 0;
  color: var(--cream); text-align: center; font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px; white-space: nowrap;
}
.ab__band-claim {                                     /* 435:5568 @626,2460 — 16/20.8 ls3.2 */
  position: absolute; left: 626px; top: 358.21px; width: 476px; margin: 0;
  color: var(--cream); text-align: center; white-space: nowrap;
  font-weight: 400; font-size: 16px; line-height: 20.832px; letter-spacing: 3.2px;
}

/* The comp draws this row without the top scrim the home page has. */
.tiles--plain .tile__scrim--top { display: none; }

/* ---- Mobile: no comp for this frame — a declared reflow (design/DEVIATIONS.md).
       One column inside 16px gutters, the band text centred, the tiles stacked. ---- */
@media (max-width: 767px) {
  .ab { height: auto; }
  .ab__hero { height: 420px; }
  .ab__tagline { left: 16px; right: 16px; top: 180px; width: auto; font-size: 40px; line-height: 44px; }
  .ab__crumbs, .ab__intro, .ab__photo, .ab__quote, .ab__body {
    position: static; left: auto; top: auto; width: auto;
  }
  .ab__band {                       /* the band text is centred in the photo, not pinned */
    position: relative; left: auto; top: auto; width: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  }
  .ab__band-title, .ab__band-claim {    /* relative: the photo above them is absolute */
    position: relative; z-index: 1; left: auto; top: auto; width: auto;
    padding: 0 16px; white-space: normal;
  }
  .ab__crumbs { margin: 16px; }
  .ab__intro { margin: 24px 16px 0; text-align: left; }
  .ab__photo { display: block; margin: 32px 0 0; width: 100%; height: 320px; }
  .ab__quote { margin: 32px 16px 0; font-size: 24px; line-height: 32px; letter-spacing: 2.4px; }
  .ab__body { margin: 20px 16px 0; }
  .ab__band { margin-top: 40px; height: 420px; }
  .ab__band-title { font-size: 40px; line-height: 44px; }
  .ab__band-claim { letter-spacing: 1.6px; }
}