/* Hero LAYOUT now lives in site.css (.hero). Removed 15 Aug — five parallel copies had
   drifted apart and every fix had to be made five times. This file keeps type/colour only. */
/* =============================================================================
   page-portfolio.css — /portfolio/ only.

   Everything shared (container, band, buttons, marquee, header, footer, .card*,
   the .t-* type utilities) lives in site.css and is used here by its EXISTING
   class names. This file holds only the two genuinely page-unique sections: the
   single-column hero and the 3x2 film grid.

   RE-TUNED against the POSITIVELY IDENTIFIED faces (Young Serif / Great Vibes /
   Jost — see notes/typography.md). Every size below was re-solved from the
   mockup's INK RUN WIDTHS against the real font's own advance widths, measured
   with canvas actualBoundingBox at 100px and scaled. Heights were NOT used to
   size type: typography.md documents that glyph heights off these mockups are
   threshold-sensitive by up to 15% while line widths are not.

   Solved sizes (mockup design/Portfolio/mockup.png, 3204x4722 = @2x, halved):
     h1 "Wedding"/"Films."  ink 352.0 / 248.5 wide, 81.5 / 65.5 tall
                            -> Young Serif 80px, ls 0   (width says 80.16/80.14,
                               height says 80.30/79.98 — four independent reads)
     hero intro             ink 476.5 / 107.0 -> Jost 300 14px + .013em
                               (= typography.md's measured body fit exactly)
     card title x6          ink 181.5/161/177/168/151/175.5 -> Young Serif 21.6px
                               (six strings return 21.62 +/- 0.04)
     card meta              21-glyph least-squares on TEXAS HILL COUNTRY . 2024
                               -> Jost 11.2px + .132em, max glyph residual 0.54px
     card desc x12 lines    -> Jost 13.1px / 22px, max residual 1.8px (0.5%)
   ============================================================================= */

/* ------------------------------------------------------------------ hero ---
   Band y 112 -> 558 (446 tall). Ink landmarks (page-absolute CSS px, measured):
     eyebrow ink  y 195.5 - 226.0   x 217   - 341    (w 124.0)
     h1 line 1    y 255.0 - 336.5   x 217   - 569    (w 352.0, "Wedding")
     h1 line 2    y 339.0 - 404.5   x 219   - 467.5  (w 248.5, "Films.")
     intro line 1 y 448.5 - 463.5   x 218   - 694.5  (w 476.5)
     intro line 2 y 474.5 - 489.5   x 217.5 - 324.5  (w 107.0)
   Derived baselines: eyebrow 222, h1 318.5 / 403.5 (pitch 85), intro 460 / 486.
   A full-width ink scan of y 380-1000 returns one run (x 217-694) — nothing
   sits on the right half, so this is a single column, not a split hero. */

/* The copy sits in the LEFT half, so it needs the container's own gutter plus enough top space
   to clear the header that overlays it. */
/* Aligned exactly like Home's hero copy: flush to the page gutter, full column width. The first
   version capped it at half the 1440 column and pushed it right with margin-left:auto, which
   indented the whole block ~340px and made the two heroes look like different designs
   (Pete, 15 Aug: "why so different"). */
/* The intro measure was set against a full-width band; in a half-width column it must not also
   cap itself or the text ends up in a narrow ribbon. */

.portfolio-hero__eyebrow { margin: 0; }   /* .t-script: Great Vibes 30px / 39px */

/* Portfolio's h1 is NOT the 68px inner-page tier: "Wedding" ink is 352.0 wide
   and Young Serif renders that string 439.1 wide at 100px -> 80.16px, with the
   ink height agreeing at 80.30px. Tracking must be 0, not the -.02em the shared
   .t-display-l carries: -.02em at 80px would pull 6 gaps x 1.6 = 9.6px out of a
   352px run. 85/80 = 1.0625 keeps the measured 85px pitch at desktop.
   The two lines are an authored break, not a wrap. */
.portfolio-hero__title {
  margin: 14.05px 0 0;
  font-size: clamp(38px, 5vw, 80px);
  line-height: 1.0625;
  letter-spacing: 0;
}

/* Deck line. The approved copy's title line ("The Films — Cinematic Wedding
   Stories from Austin and Beyond") sits under the display h1 as a subtitle, in
   the SAME display face one tier down — the shared .t-display-sm step (23px,
   typography.md). No new face, no new colour, no new size outside the scale. */
.portfolio-hero__deck {
  max-width: 544px;
  /* 22px was measured against the comp's smaller h1; at the 80px hero tier the deck sat almost
     touching the descenders (Pete, 15 Aug: "too close under h1"). */
  margin: 40px 0 0;
  /* size comes from the shared .t-display-sm step; only the display family (the
     .t-display-* utilities set size, not family — h1–h4 get the family from the
     element selector, and this is a <p>) and the leading are set here. */
  font-family: var(--font-display);
  line-height: 1.4;
  color: var(--brown);
}

/* 14px + .013em reproduces BOTH the comp's measured ink runs (476.5 and 107.0)
   to within 0.1px and is the same fit typography.md solved for body copy
   site-wide. The measure moves 490 -> 544 (the site body measure used by every
   other page's prose) because the comp's single condensed line is superseded by
   the approved three-sentence intro; the comp's hard wrap no longer applies. */
.portfolio-hero__intro {
  max-width: 544px;
  margin: 23.37px 0 0;
  font-size: 18px;
  line-height: 31px;
  letter-spacing: .013em;
  color: var(--body);
}

/* ------------------------------------------------ shared page primitives ---
   Same values as the Services page's .services-prose / .services-lead /
   .services-closing so the two pages read as one system: 16px paragraph gap
   against the 26-27px line, +.01em tracking. Duplicated rather than shared
   because those live in page-services.css — see the shared-library request in
   the build report. */
.portfolio-prose p { margin: 0 0 16px; }
.portfolio-prose p:last-child { margin-bottom: 0; }

.portfolio-prose,
.portfolio-lead,
.portfolio-closing,
.portfolio-aside { letter-spacing: .01em; }

/* ------------------------------------------------------------- film grid ---
   Band y 604 -> 2002.5 (1398.5 tall). 3 columns of 373.33 with a 24px gutter
   inside the 1168 content column (373.33*3 + 24*2 = 1168 exactly).
   Row 1 image top y 668, row 2 image top y 1315 — row pitch 647.
   Card 5's flat swatch measures exactly x 614-988 / y 1315-1813 = 374 x 498, so
   the 3:4 frame is right and the 747x996 assets are placed 1:1 with no crop.
   Radius 0 (probe: "CONSTANT inset: SQUARE corner"). */
/* Generous, and centred (Pete, 15 Aug: "no space around and it should be centered"). The 64px
   band padding left the heading crammed against the marquee above it, and the head was still
   left-aligned over a full-width run of film sections — my earlier centring rule was lost in the
   hero-consolidation cleanup. Restated here so it cannot be dropped again. */
.portfolio-films { padding: clamp(72px, 10vh, 128px) 0 clamp(64px, 8vh, 96px); }

/* Section head — the site's standard "heading then lead on the 544 measure"
   block (identical construction to the Services page's .services-sectionhead).
   The comp had this heading as sr-only because no copy had been placed; the
   approved copy supplies it, so it is now visible. */
.portfolio-sectionhead { margin: 0 0 clamp(48px, 7vh, 80px); text-align: center; }
.portfolio-sectionhead h2 { margin: 0 0 20px; }
/* Centre the lead AND cap the line length — the full 1328px column would run ~150 characters. */
.portfolio-lead { margin-inline: auto; max-width: 62em; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 22.52px;          /* desc last baseline 1286 -> row 2 image top 1315 */
}

.portfolio-card { display: flex; flex-direction: column; }

.portfolio-card__media { aspect-ratio: 3 / 4; }

/* Card 05 ("Anna & David") has no exported photograph: the mockup fills the slot
   with a flat #D8C2A8 rectangle and still draws its 05 badge. Reproduced as
   measured — but see the build report: that is a Figma placeholder swatch. */
.portfolio-card__media--placeholder { background: var(--tan); }

/* Sequence badge, top-left inside the image. Monospace — the mockup's zero is
   dotted while the card-meta years are not. Cream at 70% (measured on the flat
   card-5 block: #eee5da over #d8c2a8 -> a = 0.70 on all three channels).
   Measured on card 05, the only slot where the badge sits on a flat fill:
   ink x 631.0-643.5 (w 12.5), y 1334.5-1341.5 (h 7.0), i.e. 17.0 left / 19.5 top
   from the image box. Nearly invisible over the two lightest photos — that is
   how the mockup renders, not a reading error. */
.portfolio-card__num {
  position: absolute;
  top: 19.5px;
  left: 16.75px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 8.75px;   /* digit ink height 7.0 */
  line-height: 1;
  letter-spacing: .33em;   /* mockup digit advance is 8.0 against a 7.0 cap */
  color: rgba(247, 244, 239, .70);
}

/* image bottom 1165.78 -> title baseline 1206 (mockup: cap top 1188.5, "Sarah &
   Michael" has no descender so its ink bottom IS the baseline).
   font-weight MUST stay 400 — Young Serif ships one weight and 700 would be a
   synthesised smear. */
.portfolio-card__title {
  margin: 21.88px 0 0;
  font-size: 21.6px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}

/* The approved copy titles each film "Couple — Descriptor" (e.g. "Sarah &
   Michael — Hill Country Ceremony"). The descriptor is set as a second line of
   the SAME h3 in the SAME display face, one step down and in body brown, so the
   card gains a line but no new component and no new type tier. */
.portfolio-card__sub {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 22px;
  color: var(--body);
}

/* title baseline 1206 -> meta baseline 1231 (25.0, identical in row 2:
   1853.5 -> 1878.5). Overrides the shared .card__meta 12px/.12em, which was
   fitted before the faces were known: 12px/.12em renders TEXAS HILL COUNTRY
   . 2024 at 184.4 ink against a measured 176.5. */
.portfolio-card__meta {
  margin: 11.48px 0 0;
  font-size: 11.2px;
  line-height: 12px;
  letter-spacing: .132em;
}

/* meta baseline 1231 -> desc baseline 1264, then 1286 (pitch 22).
   13.1px reproduces every measured line width AND every line break in all six
   cards; 14px re-breaks cards 01 and 05. */
.portfolio-card__desc {
  margin: 15.34px 0 0;
  font-size: 18px;
  line-height: 31px;
  color: var(--body);
}

/* -------------------------------------------------- more wedding stories ---
   NEW band (the comp stops after the grid). Padding is the site's standard band
   rhythm — the Services page's plain cream bands measure 92.25px top and bottom,
   so that value is reused verbatim rather than invented. Background is the
   shared .band--cream-alt (#F2EFEA), already in site.css. */
.portfolio-more { padding: 92.25px 0; }

/* Six approved film titles. Not a new card component — a list, set in the same
   display face at the .portfolio-card__title tier, on the site's hairline
   (--rule-light, the marquee's rule) with square corners like everything else.
   Two columns inside the 1168 box, matching the 24px grid gutter. */
.portfolio-morelist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
}
.portfolio-morelist__item {
  font-family: var(--font-display);
  font-size: 21.6px;
  line-height: 28px;
  color: var(--brown);
  padding: 20px 0;
  border-top: 1px solid var(--rule-light);
}
/* the last item in each column closes the list off */
.portfolio-morelist__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-light); }

/* section pay-off line — same tier as the Services page's .services-closing */
.portfolio-closing {
  margin: 48px 0 0;
  max-width: 720px;
  font-size: 20px;
  line-height: 31px;
  color: var(--brown);
}

/* ----------------------------------------------- your story belongs here ---
   NEW closing band, built on the Services page's measured band-6 construction:
   two-column head/body split (544 + 80 + 544 = the 1168 content box), heading
   plus eyebrow-rule on the left, prose plus a button + arrowlink CTA row on the
   right. Burgundy, so it reads as a distinct block against the brown footer. */
.portfolio-cta { padding: 96px 0; }

.portfolio-split {
  display: grid;
  /* Proportional, matching the same change on Services and Home (Pete, 15 Aug) — fixed
     544+544 tracks were sized for the old 1168 content column and leave a gap at 1488. */
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* light variant of the shared .eyebrow-rule for the dark band */
.portfolio-rule--light { background: var(--tan); }

.portfolio-split__head .eyebrow-rule { margin-top: 24px; }

.portfolio-ctarow { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 32px 0 0; }
.portfolio-ctarow .arrowlink { padding: 12.4px 0 15.4px; }

.portfolio-aside { margin: 32px 0 0; max-width: 544px; }

/* Inline link inside running text. The shared library has .arrowlink and
   .textlink, but both are uppercase micro-labels — there is no in-sentence link
   style yet, so this is the minimum: current colour, 1px underline at the site's
   rule weight. See the shared-library request in the build report. */
.portfolio-inlink {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 244, 239, .4);
  transition: border-color .18s ease;
}
.portfolio-inlink:hover { border-bottom-color: var(--cream); }

/* Approved venue credit, which the copy places at the FOOT of each film block
   (after the description) — kept in that order here. Same face, size and colour
   as the description it follows, so it reads as a credit line rather than a
   second meta badge. NOTE for Pete: on cards 01–04 this restates the location
   already shown in the card meta above; the comp's meta line has been left
   untouched, so one of the two is redundant and is a copy call, not a build one. */
.portfolio-card__venue {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 31px;
  color: var(--body);
}

/* ============================================================== responsive ===
   No tablet or mobile comp exists; this follows the site-wide breakpoints
   already in site.css (1200 / 900 / 600). Desktop >=1602 stays exactly as
   measured. Asserted: no horizontal overflow at 1602/1440/1200/900/600/375.
   ========================================================================== */
@media (max-width: 1200px) {
  .portfolio-grid { column-gap: 20px; row-gap: 32px; }
  /* the px sub-grids hand their columns back to the fluid track */
  .portfolio-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .portfolio-morelist { column-gap: 48px; }
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .portfolio-more,
  .portfolio-cta { padding: 72px 0; }
  .portfolio-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portfolio-sectionhead { margin-bottom: 40px; }
  .portfolio-morelist { grid-template-columns: minmax(0, 1fr); }
  /* single column: only the true last item needs the closing rule */
  .portfolio-morelist__item:nth-last-child(-n+2) { border-bottom: 0; }
  .portfolio-morelist__item:last-child { border-bottom: 1px solid var(--rule-light); }
  .portfolio-ctarow .arrowlink { padding: 0 0 5px; }
}

@media (max-width: 600px) {
  .portfolio-hero__title { margin-top: 10px; }
  .portfolio-hero__deck { margin-top: 18px; line-height: 1.35; }
  .portfolio-hero__intro { margin-top: 22px; font-size: 15px; line-height: 25px; max-width: 34em; }
  .portfolio-films { padding: 44px 0 48px; }
  .portfolio-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .portfolio-card__title { font-size: 26px; line-height: 1.15; }
  .portfolio-card__sub { font-size: 17px; line-height: 24px; }
  .portfolio-card__desc { font-size: 14px; line-height: 23px; }
  .portfolio-more,
  .portfolio-cta { padding: 56px 0; }
  .portfolio-morelist__item { font-size: 19px; line-height: 26px; padding: 16px 0; }
  .portfolio-closing { margin-top: 36px; font-size: 18px; line-height: 28px; }
  .portfolio-ctarow { gap: 20px; }
}

/* ========================================================= film sections ===
   One .splitsec per film, alternating --flip (Pete, 15 Aug). Replaces the 3-up card carousel
   on this page; Home keeps its carousel, which is why the component stayed independent of both.

   Alternating bands need a rhythm the eye can follow, so consecutive sections alternate their
   cream so the boundary between two films is visible without a rule. */
.pf-film { padding: 0; }
.pf-film:nth-child(even) { background: var(--cream-alt); }

/* 4:5 made each band roughly a full screen tall on its own, so four films became an endless
   scroll of mostly-empty cream (Pete, 15 Aug: "crop the tops and bottoms... so theyre not so
   tall"). 4:3 takes ~40% off the height. The sources are portrait, so object-fit crops the top
   and bottom rather than squashing anything.

   object-position sits at 38% rather than centre: in a portrait wedding portrait the faces are
   in the upper third, and a straight centre crop tends to take the heads off. */
.pf-film .splitsec__media { min-height: 100%; }
.pf-film .splitsec__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 38%;
}

.pf-film .splitsec__copy { padding: clamp(40px, 6vh, 72px) var(--pad); }
.pf-film__title  { margin: 0; }
.pf-film__meta   { margin: 14px 0 0; }
.pf-film__desc   { margin: 22px 0 0; max-width: 34em; }
.pf-film__venue  { margin: 10px 0 0; }
.pf-film__play   { margin: 32px 0 0; }

/* The button carries an inline glyph, so it needs to be a flex row rather than the plain
   text-only .btn it inherits from. */
.pf-film__playbtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pf-film__playbtn svg { flex: none; }

/* No photograph yet: hold the shape with the design's placeholder swatch rather than collapsing
   the column and letting the copy jump across the page. */
.pf-film__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tan);
}

@media (max-width: 900px) {
  .pf-film .splitsec__copy { padding: 40px var(--pad) 56px; }
  .pf-film .splitsec__media img { aspect-ratio: 3 / 2; }
  .pf-film__placeholder { aspect-ratio: 3 / 2; }
}

/* Scrim behind the nav, matching Home. The header overlaps the top of the hero photograph, so
   the links land on whatever the picture happens to show — here, a bright sky through a floral
   arch. A fixed top-down gradient gives them a constant dark base. Stops at transparent, so the
   photograph below is untouched; pointer-events:none so it cannot intercept clicks. */

/* Section head runs the full column, centred (Pete, 15 Aug: "text should be full width
   cetnerd"). It was left-aligned in a half-width measure, which left the right half of the band
   empty above a full-width run of film sections. */
.portfolio-sectionhead { text-align: center; }
.portfolio-sectionhead .portfolio-lead {
  /* Centre the block AND cap the line length — 1328px of 18px text is ~150 characters a line. */
  max-width: 62em;
  margin-inline: auto;
}

/* ================================================ more stories: play rows ===
   Every entry gets a play button (Pete, 15 Aug). The row becomes a flex pair so the label sits
   left and the button right, with the hairline underneath as before. */
.portfolio-morelist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.portfolio-morelist__label { min-width: 0; }
.pf-more__playbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 16px;
  font-size: 10px;
}
.pf-more__playbtn svg { flex: none; width: 10px; height: 10px; }

@media (max-width: 600px) {
  /* Stack rather than squeeze the label to nothing beside the button. */
  .portfolio-morelist__item { flex-direction: column; align-items: flex-start; gap: 12px; }
}