/* ─────────────────────────────────────────────────────────────
   The Shoot — the offer, in four columns, with the portfolio
   underneath. Loads after home.css (the closing invitation)
   and borrows the member page's grid for the portfolio.
   ───────────────────────────────────────────────────────────── */

.of__head{
  background:var(--ink);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(34px,5vw,66px) var(--gutter) clamp(30px,4.2vw,52px);
  display:grid;gap:clamp(26px,4vw,58px);
  grid-template-columns:minmax(0,.86fr) minmax(0,1.35fr);
  align-items:center;
}
.of__intro{min-width:0}
.of__intro .eyebrow{color:var(--blue);margin-bottom:clamp(14px,2vw,22px)}
.of__intro h1{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5.4vw,66px);line-height:1.02;letter-spacing:-.02em;
  animation:hh-rise 1.1s cubic-bezier(.16,1,.3,1) both;
}
.of__intro h1 em{font-style:italic}
.of__lede{
  margin:clamp(18px,2.6vw,26px) 0 0;max-width:42ch;
  font-size:14.5px;line-height:1.72;font-weight:300;opacity:.8;text-wrap:pretty;
}
.of__lede:first-of-type{padding-top:clamp(16px,2.4vw,24px);border-top:1px solid rgba(var(--cream-rgb),.24)}
.of__shot{margin:0;overflow:hidden;border-radius:6px;background:var(--ink-2)}
.of__shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;animation:hh-fade 1.6s ease both}
@media (max-width:900px){
  .of__head{grid-template-columns:1fr}
  .of__shot{order:-1}
  .of__shot img{aspect-ratio:4/3}
}

/* ── the offer, side by side ─────────────────────────── */
.of__cols{
  background:var(--ink);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(30px,4vw,48px) var(--gutter);
  border-top:1px solid rgba(var(--cream-rgb),.16);
  display:grid;gap:clamp(22px,3vw,42px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
}
.of__col{min-width:0;border-inline-start:1px solid rgba(var(--cream-rgb),.16);padding-inline-start:clamp(16px,2.2vw,30px)}
.of__col:first-child{border-inline-start:0;padding-inline-start:0}
.of__col .eyebrow{color:var(--blue);margin-bottom:clamp(10px,1.6vw,16px)}
.of__col h2{
  margin:0 0 clamp(12px,1.8vw,18px);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.3vw,28px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;
}
.of__col p{margin:0 0 11px;font-size:13.5px;line-height:1.7;font-weight:300;opacity:.78;text-wrap:pretty}
.of__listTitle{font-weight:400;opacity:1;margin-top:14px}
.of__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.of__list li{
  position:relative;padding-inline-start:18px;
  font-size:13.5px;line-height:1.6;font-weight:300;opacity:.78;text-wrap:pretty;
}
.of__list li::before{
  content:'—';position:absolute;inset-inline-start:0;color:var(--blue);opacity:.8;
}
.of__closing{margin-top:14px;font-weight:400;opacity:.95}
@media (max-width:1040px){
  .of__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .of__col:nth-child(odd){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:620px){
  .of__cols{grid-template-columns:1fr}
  .of__col{border-inline-start:0;padding-inline-start:0;border-top:1px solid rgba(var(--cream-rgb),.16);padding-top:24px}
  .of__col:first-child{border-top:0;padding-top:0}
}

/* ── the portfolio's heading; the grid itself is member.css ── */
.of__work{
  background:var(--ink);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(34px,4.6vw,60px) var(--gutter) clamp(14px,2vw,20px);
  border-top:1px solid rgba(var(--cream-rgb),.16);
}
.of__work .eyebrow{color:var(--blue);margin-bottom:10px}
.of__work h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:.06em;
}
.of__workLede{margin:10px 0 0;max-width:56ch;font-size:14px;line-height:1.65;font-weight:300;opacity:.72}
/* the grid comes from member.css; widen it to this page's measure. The space
   under it is member.css's too, so the gallery clears the closing photograph
   by the same amount on both pages that draw one (BUG-2026-06). */
.of__work ~ .mb__work{max-width:var(--wrap);padding-top:clamp(16px,2.4vw,24px)}
/* REQ-008 asked for one tile shape here, and this forced .mw to 2:3. BUG-001
   supersedes it: a fixed shape is exactly what crops a landscape photograph,
   so each tile takes its own proportion instead (member.css, .mb__grid--fit)
   and this page only widens the grid to its own measure.
   `:not(--fit)` because these are column counts for the square fallback: the
   justified and modular variants set their own, and this selector is the
   more specific of the two, so without it the phone grid would be told to be
   two columns wide when the report asks for three. */
.of__work ~ .mb__work .mb__grid:not(.mb__grid--fit){grid-template-columns:repeat(4,1fr)}
@media (max-width:1060px){.of__work ~ .mb__work .mb__grid:not(.mb__grid--fit){grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.of__work ~ .mb__work .mb__grid:not(.mb__grid--fit){grid-template-columns:repeat(2,1fr)}}

/* The "View full gallery" button and the mosaic behind it are gone
   (CHANGE-004). Expanding it re-proportioned the tiles already on screen, and
   paging in another 36 frames re-cut the rhythm from wherever the count
   happened to land. The selection above is the gallery now, and the page runs
   from the last tile straight to the closing invitation. */