/* 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-doc{display:grid;gap:12px}
.co-doc > *{margin:0}
.co-doc-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,1.4vw,16px);align-items:center}
.co-doc figure{margin:0!important}
.co-sheet{--paper:#F7F3EA;position:relative;aspect-ratio:3 / 4;padding:clamp(12px,1.6vw,22px);overflow:hidden;border-radius:4px;background:var(--paper);color:#25221E;font-family:Georgia,'Times New Roman',serif;font-size:clamp(.72rem,.5rem + .5vw,1rem);line-height:1.5;box-shadow:0 18px 40px -22px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.14)}
.co-sheet p{margin:0 0 .6em;max-width:none;color:inherit}
.co-sheet-tag{font:500 .6rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#7A2A2A!important;margin-bottom:1em!important}
.co-sheet-s{font-size:.82em;line-height:1.5;color:#4a443c!important}
.co-sheet-n{margin-top:1.1em!important;padding-top:.7em;border-top:1px solid rgba(0,0,0,.18);font:500 .6rem/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#7A2A2A!important}
.co-sheet-l1{margin-bottom:.9em!important;font-size:1.2em;font-weight:700;line-height:1.3}
.co-sel{padding:0 2px;outline:1.5px solid #B0302E;outline-offset:3px}
.co-sheet.is-flat{-webkit-user-select:none;user-select:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px),var(--paper)}
.co-sheet.is-flat p{filter:blur(.35px)}
.co-doc figcaption{margin-top:8px;font-size:.8rem;line-height:1.4;color:var(--muted)}
.co-doc figcaption strong{margin-right:6px;font:500 .68rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.co-doc-arrow{display:grid;justify-items:center;gap:4px;max-width:66px;text-align:center;font:500 .62rem/1.25 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.co-doc-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.co-doc-cap{font-size:.82rem;line-height:1.5;color:var(--muted)}
@media (max-width:699px){
  .co-doc-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .co-sheet{aspect-ratio:auto;padding:16px;font-size:.92rem}
  .co-sheet-s,.co-sheet-n{display:none}
  .co-doc-arrow{max-width:none;grid-auto-flow:column;justify-content:center;gap:8px}
  .co-doc-arrow svg{transform:rotate(90deg)}
}