/* CLEOWebsites.ca — page-scoped composition for the "about" page.
 * Lifted verbatim from the approved J2 prototype (about.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. */

#open .scene__body{align-items:flex-end;padding-bottom:clamp(56px,9vh,110px)}
  #open .h-title{max-width:18ch}
  /* The story is the only place on the whole site that goes light. It earns
     it: this is the one surface a visitor is meant to sit and read. */
  #story{background:var(--paper);color:var(--ink)}
  #story .scene__media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(251,248,243,.97) 0%,rgba(251,248,243,.9) 46%,
      rgba(251,248,243,.62) 74%,rgba(251,248,243,.4) 100%)}
  #story .scene__body{align-items:center;padding-top:120px;padding-bottom:104px}
  .story__inner{width:100%;max-width:980px;margin:0 auto}
  #story .slate,#story .meta{color:#7A6D5C}
  #story .h-sec{color:var(--ink)}
  .pull{font-family:var(--f-voice);font-style:italic;font-weight:300;
    font-size:clamp(22px,2.3vw,32px);line-height:1.34;color:#2B241D;
    max-width:20ch;margin:34px 0 34px auto;text-align:right;
    border-right:1px solid rgba(192,143,60,.6);padding-right:22px}
  #means .scene__body{align-items:center;padding-top:104px;padding-bottom:96px}
  .means__inner{width:100%;max-width:980px;margin:0 auto}
  #close .scene__body{align-items:center;justify-content:center;flex-direction:column;
    text-align:center;gap:20px}
  @media (max-width:820px){
    #open .scene__body{padding-bottom:44px}
    #story .scene__body{padding-top:96px;padding-bottom:72px}
    .pull{margin-left:0;text-align:left;border-right:0;padding-right:0;
      border-left:1px solid rgba(192,143,60,.6);padding-left:18px;max-width:100%}
    #story .scene__media::after{background:linear-gradient(to bottom,
      rgba(251,248,243,.96) 0%,rgba(251,248,243,.92) 60%,rgba(251,248,243,.7) 100%)}
  }