/* moodboard-260913 -- /mood-board. Photos only: no captions, no hover text, no copy. Two cuts live on one URL; the cut class lands on from a head script before first paint, so switching cuts can never shift layout. */ /* round4c-260917 B6 / M2. Was clamp(12px,3vw,32px), which measured 32px at 1440 and 12px at 390 -- * the two numbers the defect names. The ruled pair is 40px at 1440 / 24px gutter at 390, which is * also what qa/tokens-approved.json carries as geometry. 3vw keeps the middle continuous: it hits * 24px at 800 and 40px at 1333, so both ends clamp to the ruled values instead of being set by vw. */ .mbwrap{padding:20px clamp(24px,3vw,40px) 72px} /* M2's other half: the H1 was .vh (1px, screen-reader only), so the page had no visible title. * Listing size, not piece size -- this is an internal board, not a published page. */ .mbh1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(24px,3vw,32px);line-height:1.14;color:var(--ink);margin:0 0 18px} /* the three eager photos are wrapped in for their AVIF tier; display:contents keeps the itself as the grid / column child, so the wrap changes no layout */ .mb picture{display:contents} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- Cut a: hers, replicated. Squarespace gallery-masonry is CSS multicolumn -- uniform column width, every image its natural aspect, 12px gutters, and the stagger is whatever the column flow produces. This is the faithful copy. ---- */ .cut-a .mb{column-count:1;column-gap:12px} @media(min-width:481px){.cut-a .mb{column-count:2}} @media(min-width:1024px){.cut-a .mb{column-count:3}} .cut-a .mi{display:block;width:100%;height:auto;margin:0 0 12px;break-inside:avoid} /* ---- Cut b: ours. Same masonry read, but three size classes assigned from `order` (every 5th wide across 2 columns, every 7th tall at 1.5x, the rest single) so the rhythm is designed rather than dictated by which photos happen to be portrait. Row unit and gaps are container-proportional (cqw), which is what lets the row spans be computed at build time and still hold at every viewport width -- no JavaScript measuring anything, so no reflow and no layout shift. ---- */ .cut-b .mb{container-type:inline-size} @media(min-width:481px){ .cut-b .mb{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row dense;gap:1cqw;grid-auto-rows:.5cqw} .cut-b .mi{display:block;width:100%;height:100%;object-fit:cover;grid-row:span var(--r2)} .cut-b .mi.wide{grid-column:span 2} } @media(min-width:1024px){ .cut-b .mb{grid-template-columns:repeat(3,1fr)} .cut-b .mi{grid-row:span var(--r3)} } /* phone: single column, natural aspect, the wide ones break out full-bleed */ @media(max-width:480px){ .cut-b .mi{display:block;width:100%;height:auto;margin:0 0 12px} .cut-b .mi.wide{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} } /* ---- review strip: TEST ONLY, removed at cutover ---- */ /* --muted on --paper measures 4.36:1, which is the page's only axe/Lighthouse contrast failure; --ink clears it. */ .rev{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px;padding:8px 10px;border:1px solid var(--hair);border-radius:2px;font-size:13px;letter-spacing:.04em;color:var(--ink)} .rev a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding:4px 2px} .rev a[aria-current="true"]{border-bottom:2px solid var(--green)} .rev button{font:inherit;color:var(--ink);background:none;border:1px solid var(--hair);border-radius:2px;padding:6px 10px;cursor:pointer} .rev .ok{color:var(--green)}