/* ============================================================
   Designer Work — gallery of projects (Direction A · Galleria)
   Reuses concept.css + catalog.css (header, footer, crumbs, wrap,
   gutter, filterbar, detail shell, backdrop).
   ============================================================ */

.work-mast{ padding-block:60px 30px; }
.work-mast h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(46px,12vw,80px); line-height:.98; letter-spacing:-.012em; margin:18px 0 0; }
.work-mast .lead{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:22px; }
@media (max-width:680px){ .work-mast{ padding-block:36px 24px; } .work-mast .lead{ flex-direction:column; align-items:flex-start; gap:14px; } .work-mast .lead p{ font-size:16px; } }
.work-mast .lead p{ font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--ink-2); max-width:560px; margin:0; }
.work-mast .count{ font-family:var(--font-display); font-size:22px; color:var(--ink-3); white-space:nowrap; }
.work-mast .count b{ font-size:40px; color:var(--ink); font-weight:500; }
.pitch-stats{ display:flex; align-items:center; gap:54px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
@media (max-width:680px){ .pitch-stats{ gap:28px; flex-wrap:wrap; } }
.pitch-stats .ps .n{ font-family:var(--font-display); font-weight:500; font-size:44px; line-height:1; color:var(--ink); }
.pitch-stats .ps .t{ font-family:var(--font-body); font-size:13px; color:var(--ink-3); margin-top:6px; }
.pitch-stats .pitch-cta{ margin-left:auto; }
@media (max-width:680px){ .pitch-stats .pitch-cta{ margin-left:0; width:auto; align-self:flex-start; } }

/* masonry gallery */
.work-grid{ column-count:3; column-gap:26px; padding:44px 0 90px; }
@media (max-width:1100px){ .work-grid{ column-count:2; } }
@media (max-width:680px){ .work-grid{ column-count:1; } }
.work-card{ break-inside:avoid; margin:0 0 32px; cursor:pointer; }
.work-card .ph{ position:relative; width:100%; border-radius:3px; overflow:hidden; }
.work-card .ph .tex{ position:absolute; inset:0; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.work-card:hover .ph .tex{ transform:scale(1.04); }
.work-card .ph .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,8,0) 55%, rgba(20,14,8,.5) 100%); opacity:0; transition:opacity .35s; }
.work-card:hover .ph .ov{ opacity:1; }
.work-card .ph .stones{ position:absolute; left:14px; bottom:14px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; }
.work-card .ph .stones span{ font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-on-stone); background:rgba(20,16,12,.46); backdrop-filter:blur(4px); padding:5px 9px; border-radius:2px; }
.work-card .ph .view{ position:absolute; right:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:0; transform:translateY(6px); transition:.35s; }
.work-card:hover .ph .view{ opacity:1; transform:none; }
.work-card .ph .yr{ position:absolute; top:14px; right:14px; z-index:3; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink-on-stone); background:rgba(20,16,12,.4); backdrop-filter:blur(4px); padding:5px 9px; border-radius:2px; }
.work-card .wc-meta{ padding-top:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.work-card .wname{ font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.04; }
.work-card .wby{ font-family:var(--font-body); font-size:13px; color:var(--ink-3); margin-top:5px; }
.work-card .wstyle{ flex-shrink:0; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); padding-top:8px; }

/* ---------------- PROJECT DETAIL ---------------- */
.work-hero{ position:relative; height:580px; border-radius:4px; overflow:hidden; margin-top:36px; }
@media (max-width:680px){ .work-hero{ height:360px; } }
.work-hero .hmeta{ position:absolute; left:28px; bottom:26px; z-index:3; color:#fff; }
.work-hero .hmeta .t{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.work-hero .hmeta h2{ font-family:var(--font-display); font-weight:500; font-size:60px; line-height:1; margin:10px 0 0; }
.work-hero .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,14,8,.1) 40%, rgba(20,14,8,.62) 100%); }

.wd-grid{ display:grid; grid-template-columns:1.5fr .75fr; gap:60px; padding-top:48px; }
@media (max-width:900px){ .wd-grid{ grid-template-columns:1fr; gap:36px; } }
.wd-main .blurb{ font-family:var(--font-display); font-weight:500; font-size:30px; line-height:1.32; letter-spacing:-.005em; color:var(--ink); margin:0 0 40px; }
.wd-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.wd-gallery .g{ position:relative; border-radius:3px; overflow:hidden; height:300px; }
.wd-gallery .g.wide{ grid-column:1 / -1; height:380px; }

.wd-side .sticky{ position:sticky; top:96px; }
.wd-side .section-label{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.wd-side .kvs{ border-top:1px solid var(--line); margin-bottom:30px; }
.wd-side .kv{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); }
.wd-side .kv .k{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.wd-side .kv .v{ font-family:var(--font-body); font-size:14px; color:var(--ink); font-weight:500; text-align:right; }

/* stones used → link to library */
.stones-used{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.stone-link{ display:flex; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:3px; text-decoration:none; transition:border-color .2s, background .2s; cursor:pointer; }
.stone-link:hover{ border-color:var(--copper); background:var(--surface); }
.stone-link .sw{ position:relative; width:52px; height:52px; border-radius:2px; overflow:hidden; flex-shrink:0; }
.stone-link .info{ flex:1; }
.stone-link .info .n{ font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1; }
.stone-link .info .c{ font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
.stone-link .go{ color:var(--copper); }

/* more from designer */
.more-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .more-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .more-row{ grid-template-columns:1fr; } }
.more-card{ cursor:pointer; }
.more-card .img{ position:relative; height:220px; border-radius:3px; overflow:hidden; }
.more-card .nm{ font-family:var(--font-display); font-weight:500; font-size:22px; margin-top:12px; }
.more-card .by{ font-family:var(--font-body); font-size:12px; color:var(--ink-3); margin-top:3px; }

.work-foot-cta{ padding-top:64px; }