/* Case-page openings. 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, including the Surfactant CEOR Project, so the dark, black and light appearances all work.
   Only the Comfy Club panel uses the client's palette inside its 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-map{display:grid;gap:12px;padding:clamp(14px,1.8vw,20px);border:1px solid var(--line-2);border-radius:var(--r);background:rgba(255,255,255,.04)}
.co-map > *{margin:0}
.co-map-title,.co-map-label{font:500 var(--fs-micro)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.co-map-title{color:var(--accent-text)}
.co-map-label{color:var(--muted);letter-spacing:.12em}
.co-map-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.co-map-hub{position:relative;display:grid;gap:3px;align-content:center;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--r-sm);background:rgba(184,121,66,.12)}
.co-map-hub strong{color:var(--ink);font-size:.98rem;line-height:1.25}
.co-map-group{display:grid;gap:4px;align-content:start}
.co-map-group > p{margin:0}
.co-map-studies,.co-map-calcs{list-style:none;margin:0;padding:0;display:grid;gap:0 18px}
.co-map-studies{grid-template-columns:repeat(2,minmax(0,1fr))}
.co-map li{display:flex;align-items:center;gap:10px;max-width:none;min-height:44px}
.co-map-n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--accent);border-radius:50%;font:500 .7rem var(--font-mono);color:var(--accent-text)}
.co-map a{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink);font-weight:700;font-size:.9rem;line-height:1.3}
.co-map a:hover{color:var(--accent-text)}
.co-map-note{font-size:.82rem;line-height:1.5;color:var(--muted)}
@media (max-width:599px){.co-map-studies{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){
  .co-map-body{grid-template-columns:minmax(150px,.62fr) minmax(0,2fr) minmax(0,1.2fr);gap:16px}
  .co-map-hub::after{content:"";position:absolute;left:100%;top:50%;width:16px;height:1px;background:var(--line-3)}
  .co-map-group{padding-left:16px;border-left:1px solid var(--line-2)}
}