/* Case-page openings, 4 Oct 2026. Every rule is scoped to .co-open. Static: no animation, nothing moves unless the recording's own button is pressed.
   Colours come from the shell's tokens, so the dark, black and light appearances all work; only the Surfactant CEOR Project (navy) and the
   Comfy Club panel (the client's palette) set their own, and only inside their opening. */
section.co-open.project-intro{--co-bg:var(--bg-2);margin-top:calc(var(--header-h) * -1);padding-block:calc(var(--header-h) + 14px) clamp(28px,4vw,52px);background:var(--co-bg);box-shadow:0 0 0 100vmax var(--co-bg);clip-path:inset(0 -100vmax);border-bottom:1px solid var(--line);border-image:linear-gradient(var(--line),var(--line)) 1 / 0 0 1px 0 / 0 100vmax}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.co-copy,.co-visual,.co-more{min-width:0}
.co-copy > *{margin-block:0}
.co-crumb{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
.co-kicker{display:block;margin-top:2px;line-height:1.5}
.co-kicker::before{display:inline-block;vertical-align:.05em;margin-right:10px}
.co-name{display:none;color:var(--ink);font-weight:600}
.co-dot{display:none;margin-inline:.55em;color:var(--muted)}
.co-open h1{margin-top:14px;font-size:clamp(1.85rem,1rem + 2vw,2.9rem);line-height:1.04}
.co-open .lead{margin-top:14px;max-width:50ch;font-size:var(--fs-lead-open);line-height:1.55}
.co-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.co-chip{display:inline-flex;align-items:center;min-height:28px;padding:3px 11px;border:1px solid var(--accent);border-radius:var(--r-pill);font:500 var(--fs-micro)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.co-copy .actions{margin-top:20px}
.co-copy .project-note{margin-top:14px!important;max-width:56ch;font-size:.84rem;line-height:1.55}
.co-visual > figure{margin:0!important;padding:0}
.co-visual .project-screen{padding-bottom:0}
.co-visual figcaption{margin-top:10px}
.co-visual .media{box-shadow:0 22px 56px -28px var(--shadow)}
.co-more{display:grid;gap:14px;align-content:start}
.co-more > *{margin:0!important}
.co-more details > summary{min-height:48px;padding:12px 56px 12px 16px;font-size:.92rem}
.co-more details > p{font-size:.92rem;line-height:1.6;color:var(--body)}
@media (min-width:900px){
  .co-grid{grid-template-columns:var(--co-cols,minmax(0,.8fr) minmax(0,1.2fr));column-gap:clamp(32px,4.4vw,64px);row-gap:22px;align-items:start}
  .co-copy{grid-column:1;grid-row:1}
  .co-visual{grid-column:2;grid-row:1}
  .co-more{grid-column:1;grid-row:2}
  .co-grid.has-more:not(.has-wide) .co-visual{grid-row:1 / span 2}
  .co-more.is-wide{grid-column:1 / -1}
}
@media (max-width:639px){
  .co-crumb .co-c-home,.co-crumb .co-c-projects,.co-crumb .co-c-sep{display:none}
  .co-crumb .co-c-parent::before{content:"\2039";content:"\2039" / "";margin-right:8px;color:var(--muted)}
  .co-name,.co-dot{display:inline}
  .co-crumb .co-c-cur{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .co-open .lead{font-size:1rem}
}
.co-home .media{--iw:1280;--w:770;--h:600;--x0:34;--y0:112;aspect-ratio:calc(var(--w) / var(--h))!important}
.co-home .media img{inset:auto;max-width:none;width:calc(var(--iw) / var(--w) * 100%);height:auto;left:calc(var(--x0) / var(--w) * -100%);top:calc(var(--y0) / var(--h) * -100%)}
@media (max-width:699px){.co-home .media{--w:600;--h:440}}