/* =========================================================================
   PORTFOLIO — inner page
   Header/footer/consult are the shared components (folds.css), unmodified.
   Nothing here is a stock photo: the hero is a mosaic of the same real
   work stills used in the wall below it, and the wall itself is an
   asymmetric bento grid (mixed tile sizes) rather than a uniform thumbnail
   grid, so the page reads as a curated wall of real student work.
   ========================================================================= */

/* --- hero: a mosaic of real stills instead of one photo -------------------- */
.pf-hero {
  position: relative;
  padding: clamp(9rem, 20vw, 13rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--void);
}
.pf-hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 6 images wrap into 2 rows at the 3-column breakpoint and 3 rows at the
     2-column one — without an explicit row track, those extra rows have no
     defined height for the images' height: 100% to resolve against, so they
     collapse/overflow and get clipped by .pf-hero's overflow: hidden. 1fr
     rows always divide the mosaic's own definite height evenly, at any
     column count. */
  grid-auto-rows: 1fr;
  gap: 2px;
}
.pf-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.7) brightness(0.55); }
.pf-hero-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--void-rgb), 0.6) 0%, rgba(var(--void-rgb), 0.78) 55%, var(--void) 100%),
    linear-gradient(90deg, rgba(var(--void-rgb), 0.6) 0%, transparent 55%);
}
.pf-hero-inner { position: relative; z-index: 1; max-width: var(--page); margin: 0 auto; }
.pf-crumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}
.pf-crumb a { color: var(--ink-mid); text-decoration: none; }
.pf-crumb a:hover { color: var(--ink); }
.pf-crumb span[aria-hidden] { color: var(--ink-quiet); }
.pf-crumb b { color: var(--ink); font-weight: 600; }
/* this eyebrow is a full sentence, not the short 2-4 word label every other
   .numbers-tag chip on the site carries (e.g. the "Projects" eyebrow just
   below it) — at mobile widths it wraps to 2 lines, and the base component's
   line-height: 1 and fully pill-rounded corners (sized for one short line)
   made the wrapped lines crowd into each other and the whole chip crowd
   into the "Portfolio" heading right after it. Loosened the line-height,
   swapped the pill radius for a softer one that suits a multi-line block,
   capped the width so it wraps evenly, and gave it more breathing room
   before the heading. */
.pf-hero .numbers-tag {
  display: inline-flex;
  width: fit-content;
  max-width: 34rem;
  border-radius: var(--r-md);
  line-height: 1.4;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.pf-hero-h {
  margin: 20px 0 clamp(1rem, 2.2vw, 1.5rem);
  max-width: 16ch;
  font-family: var(--font-poster);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.pf-hero-lead {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-mid);
}
.pf-hero-ctas { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.25rem); }

/* --- the bento wall ---------------------------------------------------------
   A repeating 12-tile rhythm (feature square, a tall tile, a wide tile,
   another tall tile) keeps 24 identical-shaped source stills from reading
   as a flat contact sheet — the two 12-tile cycles are identical so the
   pattern still feels intentional rather than random. */
.pf-wall-section { padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: var(--void); }
.pf-wall-head { max-width: var(--page); margin: 0 auto clamp(2rem, 4vw, 3rem); }
/* .pf-wall-head and .pf-courses-head wrap a plain block, not a flex column,
   so .numbers-tag's own align-self: flex-start (folds.css) never engages —
   without an explicit width the pill defaults to block and spans the full
   column instead of reading as a chip (the same bug vbs.css hit and fixed
   on .vbs-hero .numbers-tag). Forced to content width directly here too. */
.pf-wall-head .numbers-tag,
.pf-courses-head .numbers-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.5rem;
}
.pf-wall-h {
  margin: 0.5rem 0 0;
  font-family: var(--font-poster);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.pf-wall {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 195px;
  /* without dense, the browser never backtracks past a spanning tile to
     fill a gap behind it with a later, smaller one — every 2x2/1x2 tile
     was leaving a hole in the row(s) it displaced */
  grid-auto-flow: dense;
  gap: 6px;
}
.pf-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm, 6px);
  background: var(--surface);
}
.pf-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* these are tall movie-poster crops, not landscape photos — the subject
     and the title text both sit in the top half, so biasing the crop up
     (instead of the object-fit default of dead centre) keeps them in
     frame instead of cutting through the middle of the artwork */
  object-position: 50% 12%;
  display: block;
  transition: transform 0.5s var(--ease);
}
.pf-tile:hover img { transform: scale(1.06); }
.pf-tile-no {
  position: absolute;
  top: 0.6rem; left: 0.7rem;
  z-index: 1;
  font-family: var(--font-poster);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: rgba(var(--white-rgb), 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.pf-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 1.75rem 0.9rem 0.7rem;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.pf-tile:hover figcaption, .pf-tile:focus-within figcaption { opacity: 1; transform: translateY(0); }

/* the repeating bento rhythm — every 12 tiles: a 2x2 feature and two tall
   (1x2) tiles among plain 1x1 ones.
   There is deliberately no "2 columns x 1 row" wide tile: at 6 columns
   that shape is roughly 2:1 landscape, and every source still here is a
   ~2:3 portrait poster — a landscape box crops away most of the poster's
   height no matter how the crop is positioned. Only shapes that are at
   worst roughly square (the 2x2 feature) or portrait (the 1x2 tall tile)
   are used, so cover crops a manageable slice instead of cutting through
   the middle of the artwork.
   The 2x2 feature (12n+1) still needs a source still that's actually
   ~450px+ wide, or object-fit: cover has to upscale a narrower still to
   fill the box and it comes out visibly softer than its neighbours — the
   HTML orders the 24 stills so only the ~456px-wide ones land on that
   position; 1-column tiles (which only need extra height, not width) are
   safe with the ~230px-wide ones too. */
.pf-wall li:nth-child(12n+1) { grid-column: span 2; grid-row: span 2; }
.pf-wall li:nth-child(12n+4) { grid-row: span 2; }
.pf-wall li:nth-child(12n+10) { grid-row: span 2; }

/* --- courses teaser ---------------------------------------------------------- */
.pf-courses { padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: var(--surface); }
.pf-courses-head { max-width: var(--page); margin: 0 auto clamp(2rem, 4vw, 3rem); }
.pf-course-row {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: rgba(var(--white-rgb), 0.1);
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pf-course-row li { background: var(--void); }
.pf-course-row a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  text-decoration: none;
  transition: background-color var(--t-1) var(--ease);
}
.pf-course-row a:hover { background: rgba(var(--gold-rgb), 0.07); }
.pf-course-row b { font-family: var(--font-poster); font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.pf-course-row i { font-style: normal; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-quiet); }
.pf-course-go {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 1.1rem;
  color: var(--gold);
  transition: transform var(--t-1) var(--ease);
}
.pf-course-row a:hover .pf-course-go { transform: translateX(4px); }

@media (max-width: 900px) {
  .pf-hero-mosaic { grid-template-columns: repeat(3, 1fr); }
  .pf-wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 165px; }
}
@media (max-width: 640px) {
  .pf-hero-mosaic { grid-template-columns: repeat(2, 1fr); }
  .pf-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 195px; }
  .pf-wall li:nth-child(12n+1) { grid-column: span 2; grid-row: span 2; }
	.pf-hero .numbers-tag {

  max-width: 15rem !important;
 
}
}


@media (prefers-reduced-motion: reduce) {
  .pf-tile img, .pf-tile figcaption, .pf-course-go { transition: none; }
}