/* ==========================================================================
   About — boarding-pass editorial spread, recomposed around the real,
   full-body photograph (no second photo available — the reference is used
   only for editorial character: ticket/tag treatment, typography, palette,
   paper layering — not as a positional template). Portrait keeps its
   natural ~0.745 vertical ratio at ~42% of page width; the right column
   (heading, bio, boarding pass, staggered tags) sits in normal document
   flow under the photo — no forced height-matching or bottom alignment,
   the generously sized staggered tags simply bring the layout close to
   the photo's bottom edge on their own. Movement is a visual metaphor via
   ticket/tag typography, a circular stamp, and a vertical "A Portfolio In
   Motion" sidetext — no literal travel props, no invented
   destinations/seats/priorities.
   The shared .navbar/.site-footer are untouched real components (see
   style.css) — this page-scoped sheet only styles .ab-* below.

   Responsive approach (matching Home/Contact): 1440px is the approved
   desktop composition and is frozen pixel-for-pixel. From 1440 down to
   861px every structural value below is expressed in vw — computed
   directly from its approved 1440px pixel value (px/1440*100) — so the
   spread scales as one locked-proportion unit, like a poster shrinking:
   nothing re-wraps differently than the desktop design, it's the same
   design at a smaller size. At ≤860px — the same breakpoint the shared
   .navbar, Contact, and Home already use — the spread recomposes into a
   single stacked column (photo, then heading/bio/ticket) with its own
   fixed (non-vw) sizes; the purely decorative vertical sidetext is
   dropped there since it's tied to the wide horizontal spread, not the
   content.
   ========================================================================== */

:root {
  --ab-charcoal: #1f2220;
  --ab-oxblood: #671824;
  --ab-gold: #ae8b49;
  --ab-ink-dim: #665c4e;
}

.ab-theme { background: var(--cream); margin: 0; }

.ab-spread {
  position: relative;
  background: var(--cream) url('../images/home/paper-grain.png');
  background-size: 220px 220px;
  color: var(--ab-charcoal);
  width: 100%;
  padding: 2.7778vw 0 3.0556vw;
}

/* ---------- Restrained folio + sidetext + stamp ---------- */
.ab-sidetext {
  position: absolute;
  left: 2.2222vw;
  top: 6.1111vw;
  bottom: 4.8611vw;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(8px, 0.7111vw, 10.24px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-ink-dim);
  white-space: nowrap;
}

.ab-folio {
  position: absolute;
  left: 2.0833vw;
  bottom: 1.3889vw;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9px, 1.1111vw, 16px);
  color: var(--ab-ink-dim);
}

.ab-stamp {
  position: absolute;
  top: 0.9722vw;
  right: 3.1944vw;
  width: 4.8611vw;
  height: 4.8611vw;
  opacity: 0.9;
  z-index: 2;
}

/* ---------- Main asymmetric grid: full-body photo | content ---------- */
.ab-grid {
  display: grid;
  grid-template-columns: 42.0139vw 1fr;
  column-gap: 3.8889vw;
  padding: 0 3.8889vw 0 5.9722vw;
  align-items: start;
}

.ab-photo {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  border: 1px solid var(--ab-gold);
  box-shadow: 0 1.6667vw 3.3333vw rgba(31, 34, 32, 0.22);
}
.ab-photo-img {
  display: block;
  width: 100%;
  height: auto;
}

.ab-main { padding-top: 0; }

.ab-heading {
  margin: 0 0 0 -0.2083vw;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 7.1111vw;
  line-height: 0.92;
  letter-spacing: -0.006em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-heading-charcoal { color: var(--ab-charcoal); }
.ab-heading-oxblood { color: var(--ab-oxblood); }

.ab-bio {
  margin-top: 1.5278vw;
  max-width: 38.8889vw;
}
.ab-bio p {
  margin: 0 0 0.9028vw;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.0778vw, 15.52px);
  line-height: 1.56;
  color: var(--ab-charcoal);
}
.ab-bio p:last-child { margin-bottom: 0; }

/* ---------- Ticket system: three separate raster assets, each extracted
   directly (pixel crop only — no redraw/retype/recolor/reconstruction)
   from the approved reference mockup. Decorative/editorial texture, so
   all three images are aria-hidden; the factual content they depict (the
   four focus areas, USC Marshall, Los Angeles) is carried as real,
   visually-hidden text right after them for screen readers. Static
   images, not interactive.

   >860px: the pass runs the full column width directly under the bio.
   The two tags form a staggered pair below it — USC left-aligned, Los
   Angeles right-aligned and pulled up to overlap USC's bottom edge — sized
   generously (not stretched; each keeps its own natural aspect ratio) so
   together they read as loose physical objects filling the column, landing
   the last tag close to the photo's bottom edge without forcing an exact
   alignment. ---------- */
.ab-pass-img {
  display: block;
  margin-top: 2.2222vw;
  width: 100%;
  height: auto;
}

.ab-tags-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 1.5278vw;
}
.ab-tag-usc,
.ab-tag-la {
  display: block;
  width: 70%;
  height: auto;
}
.ab-tag-usc { align-self: flex-start; }
.ab-tag-la {
  align-self: flex-end;
  margin-top: -1.3889vw;
  position: relative;
  z-index: 2;
}

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

/* ==========================================================================
   ≤860px — recomposed single stacked column. The vw scale above is tuned
   for a 1440px raster; rather than let the portrait, masthead-scale
   heading, and editorial margin furniture (sidetext, box-shadow) shrink
   past the point of being well-proportioned on a phone, this swaps to
   fixed mobile sizes, the same recomposition philosophy as Home/Contact.
   The shared .navbar's own ≤860px hamburger behavior (style.css) is
   untouched and unrelated to this block.
   ========================================================================== */
@media (max-width: 860px) {
  .ab-spread { padding: 20px 0 36px; }

  /* Decorative margin flourish tied to the wide horizontal spread —
     doesn't translate to a stacked column, so it's dropped rather than
     shrunk into illegibility. */
  .ab-sidetext { display: none; }

  .ab-folio {
    left: 20px;
    bottom: 16px;
    font-size: 0.85rem;
  }

  .ab-stamp {
    top: 16px;
    right: 20px;
    width: 46px;
    height: 46px;
  }

  .ab-grid {
    display: block;
    padding: 0 20px;
  }

  .ab-photo {
    box-shadow: 0 14px 28px rgba(31, 34, 32, 0.2);
  }

  .ab-main { margin-top: 28px; }

  .ab-heading {
    margin: 0;
    font-size: 3.4rem;
    line-height: 0.96;
    white-space: normal;
  }

  .ab-bio {
    margin-top: 18px;
    max-width: none;
  }
  .ab-bio p {
    font-size: 1rem;
    margin-bottom: 14px;
  }

  .ab-pass-img { margin-top: 26px; }

  .ab-tags-wrap {
    display: block;
    margin-top: 18px;
  }
  .ab-tag-usc,
  .ab-tag-la {
    width: 100%;
    margin-top: 0;
  }
  .ab-tag-usc { margin-bottom: 14px; }
}