/* CLEOWebsites.ca — page-scoped composition for the "work" page.
 * Lifted verbatim from the approved J2 prototype (work.html), which kept each
 * page's own composition in a page <style> block. Kept per-page rather than
 * merged into system.css on purpose: #open and #close are each used by three
 * different pages with different rules, and merging would silently cross them.
 * Everything shared lives in system.css. */

/* Work's own composition: alternating full-bleed project rooms, each
     holding one real site as a pane of glass. No card grid — the same
     glass language the homepage introduced, given room to breathe. */
  #open .scene__body{align-items:flex-end;padding-bottom:clamp(56px,9vh,104px)}
  .proj{align-items:center;gap:clamp(30px,4vw,80px)}
  .proj__pane{flex:1 1 58%;perspective:1800px;display:flex;justify-content:center}
  .proj__pane .pane{width:min(680px,100%)}
  .proj__text{flex:1 1 34%;max-width:400px}
  .proj--flip{flex-direction:row-reverse}
  .proj--flip .pane--tilt{transform:rotateY(13deg) rotateX(2.5deg)}
  .proj__facts{margin-top:22px;display:flex;flex-direction:column;gap:9px}
  .proj__fact{display:flex;gap:12px;font-size:16px;color:rgba(244,239,231,.8);
    padding-top:9px;border-top:1px solid rgba(244,239,231,.16)}
  .proj__fact b{font-weight:500;color:var(--ivory);min-width:104px;font-family:var(--f-meta);
    font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
  #close .scene__body{align-items:center;justify-content:center;flex-direction:column;
    text-align:center;gap:20px}
  /* An honest, art-directed empty slot rather than stock pretending to be a
     real CLEO card. It states what the finished photograph must show, which
     is what docs/DESIGN-SYSTEM.md's placeholder policy asks for. */
  .card-shot{aspect-ratio:16/11;background:linear-gradient(150deg,#241C15,#12100D)}
  .card-shot__slot{position:absolute;inset:14px;border:1px dashed rgba(240,220,166,.42);
    border-radius:4px;display:flex;flex-direction:column;justify-content:center;
    gap:10px;padding:clamp(20px,3vw,40px);text-align:center}
  .card-shot__label{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--brass-hi)}
  .card-shot__brief{font-size:16px;line-height:1.5;color:rgba(244,239,231,.72);
    max-width:34ch;margin:0 auto}
  @media (max-width:820px){
    .proj,.proj--flip{flex-direction:column;justify-content:flex-end;gap:20px;
      padding-top:96px;padding-bottom:52px}
    .proj__pane{flex:none;width:100%;perspective:1200px}
    .proj--flip .pane--tilt{transform:rotateY(6deg) rotateX(1.5deg)}
    .proj__text{flex:none;max-width:100%}
    #open .scene__body{padding-bottom:44px}
  }