/* ───────────────────────────────────────────────────────────── Crew member page — who they are, eight pieces of their work, and the invitation to book. Navy ground, gold accents; the grid speaks the same square language as the homepage feed. ───────────────────────────────────────────────────────────── */ /* ── the introduction ────────────────────────────────── */ .mb{ max-width:1180px;margin:0 auto; padding:clamp(40px,6vw,84px) var(--gutter) clamp(34px,5vw,60px); display:grid;gap:clamp(28px,5vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; } .mb__text{min-width:0} .mb__text .eyebrow{color:var(--blue);margin-bottom:clamp(14px,2vw,22px);animation:hh-fade 1.4s ease both} .mb__text h1{ margin:0;font-family:var(--serif);font-weight:400; font-size:clamp(38px,6.4vw,74px);line-height:.96;letter-spacing:-.02em; overflow-wrap:anywhere; animation:hh-rise 1.1s cubic-bezier(.16,1,.3,1) both; } .mb__tag{ margin:clamp(10px,1.6vw,16px) 0 0; font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(17px,2.1vw,23px);line-height:1.35;color:var(--blue); } .mb__bio{ margin-top:clamp(20px,3vw,30px);padding-top:clamp(18px,2.6vw,26px); border-top:1px solid rgba(248,244,236,.22); max-width:46ch; } .mb__bio p{margin:0 0 10px;font-size:15px;line-height:1.72;font-weight:300;opacity:.82;text-wrap:pretty} .mb__bio p:last-child{margin-bottom:0} .mb__acts{display:flex;flex-direction:column;gap:10px;margin-top:clamp(24px,3.4vw,34px);max-width:340px} .mb__btn{ display:flex;align-items:center;gap:14px; padding:15px 20px;border:1px solid rgba(198,162,92,.5);border-radius:6px; font-size:11px;letter-spacing:.2em;text-transform:uppercase; transition:background .4s ease,color .4s ease,border-color .4s ease; } .mb__btn svg{flex:0 0 auto;opacity:.85} .mb__btn span{flex:1 1 auto} .mb__btn i{font-style:normal;font-size:12px;opacity:.6} .mb__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--slate)} .mb__btn:hover svg,.mb__btn:hover i{opacity:1} .mb__shot{ margin:0;overflow:hidden;border-radius:clamp(8px,1.2vw,14px); background:var(--ink-2);box-shadow:0 30px 80px rgba(0,0,0,.42); } .mb__shot img{ width:100%;height:auto;aspect-ratio:5/6;object-fit:cover; animation:hh-fade 1.6s ease both; } @media (max-width:860px){ .mb{grid-template-columns:1fr} /* the portrait leads on a narrow screen — it is the introduction */ .mb__shot{order:-1} .mb__shot img{aspect-ratio:4/5} .mb__acts{max-width:none} } /* ── the work ────────────────────────────────────────── */ /* The gallery ended flush against whatever came next — on a member's page that is the closing invitation, whose photograph is full-bleed on a phone, so the last tile sat directly on top of a second photograph with not a pixel between them (BUG-2026-06). The homepage never does this: every band above that photograph ends with its own space. `scroll-margin-top` is the other half of the same report — the heading is what a jump to #work lands on, and it landed underneath the sticky masthead. */ .mb__work{ max-width:1180px;margin:0 auto; padding:0 var(--gutter) clamp(40px,7vw,64px); scroll-margin-top:96px; } .mb__work h2{ margin:0 0 clamp(16px,2.4vw,24px); font-family:var(--serif);font-weight:400; font-size:clamp(26px,3.6vw,40px);line-height:1.05;letter-spacing:-.01em; } .mb__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,.8vw,9px); } @media (max-width:1060px){.mb__grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:640px){.mb__grid{grid-template-columns:repeat(2,1fr);gap:4px}} .mw{ position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px; padding:0;border:0;background:var(--ink-2);color:inherit;font:inherit;cursor:pointer; } /* ── BUG-001: the justified variant ────────────────────────── The grid above gives every tile the same square, which crops a 3:2 landscape to two thirds of its width — and the portfolios do hold landscapes. `--fit` is used instead whenever the server could read the real proportions, and then each tile carries its own: --ar the photograph's aspect ratio, so the tile is its shape --r the same number, so the tile grows in proportion to its width flex-grow and flex-basis both scale with the ratio, which is what makes every tile on a row come out at one height without any of them being cut. --row is the height a row aims for; the last row is allowed to fall short rather than stretch a lone frame across the page. */ .mb__grid--fit{ display:flex;flex-wrap:wrap;gap:clamp(5px,.8vw,9px); --row:clamp(190px,22vw,300px); } .mb__grid--fit .mw{ aspect-ratio:var(--ar,1); flex:var(--r,1) 1 calc(var(--r,1) * var(--row)); min-width:0; /* Growth is capped rather than left open. A last row holding two frames would otherwise share the whole width between them and come out half again as tall as every row above it. Capping the width keeps the ratio (height follows from aspect-ratio) and leaves the slack as space at the end of the row, which is how a justified gallery is supposed to end. 100% is the second bound: one very wide frame still fits its row. */ max-width:min(100%, calc(var(--r,1) * var(--row) * 1.35)); } /* ── the modular grid, on a phone (BUG-2026-05) ────────────── The justified layout above sizes every tile from what is left over on its row, which is exactly what the report describes: the last frame of a gallery came out a third wider and half again taller than the frames above it, and a 3:2 landscape ran almost the full width of the screen. Neither is the tile's own doing — it is how many neighbours it happened to have. So on a phone the grid is modular rather than justified. Three columns, always. A portrait or a square takes one cell; a landscape takes two, side by side, and is cropped to the row's height by object-fit rather than setting a height of its own. A short last row keeps the cell size and leaves the rest of the row empty — the one rule the justified layout could not express. The row height is stated rather than left to the tiles. A cell is a 2:3 portrait — the shape the shoot was photographed in — so the row is one and a half cells tall, and `--cell` is the column width worked out from the same measurements the grid itself uses: the viewport, less the page gutter on both sides, less the two gaps, in three. Doing it this way rather than putting `aspect-ratio:2/3` on the tiles is what lets a landscape fill its two columns: a grid item with an aspect ratio takes the ratio's height and aligns to the top instead of stretching, so a landscape would have sat in its row with a band of ground under it — and a landscape alone on the last row would have had no row to take a height from at all. `dense`: a landscape that does not fit the columns left on a row drops to the next one, and without dense the column it left behind stays as a hole in the middle of the gallery. Pulling a later portrait up into that hole reorders two neighbours; leaving it reads as a missing photograph. */ @media (max-width:640px){ .mb__grid--fit{ --gap:4px; --cell:calc((100vw - 2 * var(--gutter) - 2 * var(--gap)) / 3); display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row dense; grid-auto-rows:calc(var(--cell) * 1.5); gap:var(--gap); } /* height:100% rather than trusting stretch: .mw is a