/* Case-study specific components (loaded on case detail pages) */

.back-link { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--thread-soft); }
.back-link:hover { color: var(--weld); }

.hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem 1.8rem; margin-top: 2.4rem; max-width: 620px; }
@media (min-width: 680px){ .hero-stats { grid-template-columns: repeat(4,1fr); } }
.hero-stats .n { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.8rem); line-height: 1; font-variation-settings:"opsz"120,"SOFT"30; color: var(--linen); }
.hero-stats .l { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--thread-soft); margin-top: .5rem; }

/* layout: sticky aside + body */
.case-layout { display: grid; gap: 2.4rem; }
@media (min-width: 940px){ .case-layout { grid-template-columns: 290px 1fr; gap: 3.4rem; } }
.case-aside { position: relative; }
@media (min-width: 940px){ .case-aside .glance { position: sticky; top: 100px; } }
.glance { background: #fff; border: 1px solid var(--linen-2); border-radius: var(--rad-lg); padding: 1.5rem; box-shadow: var(--lift-1); }
.glance h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.glance dl { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.glance dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .8rem; }
.glance dd { font-weight: 600; }

.case-body > div + div { margin-top: 0; }
.case-body p { color: #38323f; margin-top: 1rem; max-width: 64ch; }
.case-body .kicker { color: var(--madder); }

/* weave diagram */
.weave-diagram { display: grid; gap: 1rem; align-items: center; margin-top: 1.6rem; background: var(--vat); border-radius: var(--rad-lg); padding: 1.6rem; }
@media (min-width: 720px){ .weave-diagram { grid-template-columns: 1.3fr auto auto; } }
.weave-diagram .threads-in { display: flex; flex-wrap: wrap; gap: .5rem; }
.weave-diagram .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--thread-soft); font-family: var(--mono); font-size: .74rem; }
.loom-node { display: grid; justify-items: center; gap: .4rem; padding: .9rem 1.2rem; background: var(--weld); border-radius: 14px; color: var(--vat); font-weight: 700; font-size: .85rem; position: relative; }
.loom-node::before { content:"→"; position: absolute; left: -1.3rem; color: var(--thread-faint); }
.tapestry-node { padding: .9rem 1.2rem; background: var(--dye-warm); color: #2a140f; font-weight: 700; border-radius: 14px; font-size: .9rem; text-align: center; position: relative; }
.tapestry-node::before { content:"→"; position: absolute; left: -1.3rem; color: var(--thread-faint); }
@media (max-width: 719px){ .loom-node::before, .tapestry-node::before { content:"↓"; left: 50%; top: -1.3rem; transform: translateX(-50%); } }

/* light insight cards on linen body */
.insight.light { background: #fff; border: 1px solid var(--linen-2); border-left: 3px solid var(--verdigris); color: #38323f; margin-top: 1rem; box-shadow: var(--lift-1); }
.insight.light.knot { border-left-color: var(--madder); }
.insight.light .h { color: var(--ink-faint); }
.insight.light strong { color: var(--ink); }

/* pull quote */
.pullquote { margin: 3rem 0; padding: 2.2rem 0; border-top: 2px dashed var(--linen-3); border-bottom: 2px dashed var(--linen-3); }
.pullquote .quote { max-width: 20ch; }
@media (min-width: 720px){ .pullquote .quote { max-width: 24ch; } }