/* Family detail pages (stubs) — on the shared torque.css identity */
.detail-shell{width:min(100%,var(--wrap));margin:0 auto;padding:clamp(28px,6vh,56px) var(--pad) 96px}
.detail-hero{max-width:60ch}
.detail-hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;letter-spacing:-.01em;font-size:clamp(2.4rem,6vw,4rem);line-height:.98;margin:14px 0 14px}
.detail-hero .lede{color:var(--muted);font-weight:300;font-size:clamp(1.05rem,1.5vw,1.25rem)}

.detail-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:clamp(36px,6vh,60px) 0}
@media(max-width:760px){.detail-points{grid-template-columns:1fr}}
.point{position:relative;background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--radius);padding:24px 22px}
.point::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.point h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:1.25rem;margin-bottom:6px}
.point p{color:var(--muted);font-size:.92rem;font-weight:300}

.example-slot{margin:8px 0 40px;border:1px dashed var(--line-strong);border-radius:var(--radius);padding:26px 24px;color:var(--muted-2);font-weight:300}
.example-slot .k{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:500}
.example-slot strong{color:var(--muted);font-weight:500}

.detail-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px}
.detail-note{margin-top:40px;font-size:.8rem;color:var(--muted-2);font-weight:300}

/* ── Selected work gallery (family pages) ── */
.work{margin:clamp(40px,6vh,64px) 0 8px}
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.work-head h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:1.5rem}
.work-head .cell{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
/* homepage taste row: 4 text-only cards, one row on desktop, 2 then 1 as it narrows */
.work-grid--home{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.work-card{background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;transition:border-color .18s ease, transform .18s ease}
.work-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
/* screenshot slot — where the real (anonymised) image drops in, zero reflow */
.work-shot{aspect-ratio:16/10;background:var(--bg);border-bottom:1px solid var(--hair);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.work-shot::after{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(120% 120% at 50% 0,rgba(0,0,0,.6),transparent)}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block}
.work-shot .ph{position:relative;z-index:1;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.work-body{padding:18px 20px 20px}
.work-body .sector{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.work-body h3{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:lowercase;font-size:1.2rem;margin:6px 0 6px;line-height:1.08}
.work-body p{color:var(--muted);font-size:.9rem;font-weight:300}
.work-disclaimer{margin-top:16px;font-size:.76rem;color:var(--muted-2);font-weight:300}

/* two-mode layout (agents: embedded vs standalone) + principle strip */
.detail-points.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.detail-points.two{grid-template-columns:1fr}}
.detail-principles{margin:8px 0 4px;font-size:.9rem;color:var(--muted);font-weight:300}
.detail-principles b{color:var(--accent);font-weight:500}