/* ---------------------------------------------------------------
   work.css — the only styling /work/ needs beyond styles.css.
   Loaded after styles.css. Uses the existing :root tokens, adds
   no new colours, and touches no selector used by another page.
   --------------------------------------------------------------- */

/* disclosure box — same construction as .sent, different purpose */
.notice{
  border:1px solid var(--reef);
  border-left:4px solid var(--reef);
  background:var(--paper);
  padding:clamp(1.2rem,3vw,1.75rem);
  margin-top:clamp(1rem,3vw,1.75rem);
  max-width:78ch;
}
.notice .mono{color:var(--reef-ink);display:block;margin-bottom:.8rem}
.notice h2{
  margin-bottom:.5rem;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  font-weight:700;letter-spacing:-.015em;
}
.notice p:last-child{margin-bottom:0}

/* screenshot link */
.shot{
  display:block;line-height:0;
  margin:1.4rem 0 0;
  border:1px solid rgba(4,32,81,.3);
  background:var(--quartz);
  transition:border-color .2s ease;
}
.shot img{display:block;width:100%;height:auto}
.shot:hover,.shot:focus-visible{border-color:var(--reef)}

/* problem / benefit pair inside a seam */
.pair{margin-top:1.5rem}
.pair h3{margin-bottom:.35rem;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.pair p{margin-bottom:0;font-size:.98rem;line-height:1.55}

/* the seam's own list follows the pair, so pull it up a little */
.seam .pair + ul{margin-top:1.5rem}

/* banner on each demo page linking back here */
.demo-return{
  display:flex;justify-content:center;align-items:center;gap:.9rem;flex-wrap:wrap;
}