/* /story — the photographs as objects on a table, annotated in the same hand the sum section
   uses. Fifteen years of pictures are not consistent in size, crop or quality; this treatment
   makes that the point rather than cropping it away. Reuses the a+ shell for header/footer. */
.pg.st{background:var(--bone);color:var(--ink)}
.st .top{background:transparent}

.sh1{padding:126px 40px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:64px;align-items:end}
.sh1 h1{margin:20px 0 0;font-size:clamp(46px,5.4vw,88px);text-wrap:balance}
.sh1 p{margin:26px 0 0;font:400 20px/1.62 'Geist',sans-serif;color:#5d5850;max-width:50ch;text-wrap:pretty}
/* A definite height on the image, not aspect-ratio with height:auto — the figure was being
   stretched by the grid row and opening a band of empty sleeve above the photograph. */
/* NOT .hero — aplus.css already owns that class as a 100vh flex container, which was
   stretching this figure to the full viewport and opening a band of empty sleeve. */
.ph.stlead{--r:-1.6deg;padding:13px 13px 0;justify-self:end;align-self:end;width:100%;display:block}
.ph.stlead img{width:100%;height:clamp(340px,50vh,520px);object-fit:cover;object-position:center 28%}

.table{padding:44px 40px 110px;display:grid;grid-template-columns:repeat(12,1fr);gap:58px 32px;align-items:start}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}
.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:1/-1}
/* Two beats carry no photograph on purpose: the company that was burned down, and the
   argument for a+. Set wider and quieter so the page slows down at both. */
.note.quiet{max-width:64ch;padding:8px 0 8px 26px;border-left:3px solid rgba(27,28,30,.22)}
.note.why{max-width:70ch}
.note.why b{font-weight:400;color:var(--acc)}
.note p + p{margin-top:16px}
.note .go{margin-top:20px}
.rule{grid-column:1/-1;height:1px;background:rgba(27,28,30,.16);margin:4px 0}

/* a print in a sleeve, dropped at a slight angle */
.ph{margin:0;background:#fff;padding:12px 12px 0;box-shadow:0 18px 44px -28px rgba(27,28,30,.6);
  transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.ph:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 26px 54px -26px rgba(27,28,30,.55)}
.ph img{width:100%;height:auto}
.ph figcaption{padding:14px 4px 18px}
.hand{font:700 27px/1.15 'Caveat',cursive;color:var(--ink)}
.ph .m{display:block;margin-top:7px;font:400 14px/1.55 'Geist',sans-serif;color:#6b665e}

.note{align-self:center;padding:0 8px}
.note .hand{display:block;margin-bottom:10px;color:var(--acc);font-size:31px}
.note p{margin:0;font:400 19px/1.62 'Geist',sans-serif;color:#3a3630;text-wrap:pretty}
.note .inl{border-bottom:1.5px solid var(--acc);padding-bottom:2px;white-space:nowrap}
.note .inl:hover{color:var(--acc)}

/* the door to the personal half */
.rest{border-top:1px solid rgba(27,28,30,.18);margin:0 40px}
.rest > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:6px 24px;padding:46px 0;transition:opacity .3s}
.rest > summary::-webkit-details-marker{display:none}
.rest > summary:hover{opacity:.7}
.rest > summary:focus-visible{outline:3px solid var(--acc);outline-offset:6px;border-radius:3px}
.sm-h .hand{font-size:38px;color:var(--acc)}
.sm-p{grid-column:1;font:400 17px/1.5 'Geist',sans-serif;color:#6b665e}
.sm-i{grid-column:2;grid-row:1/span 2;position:relative;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(27,28,30,.3);transition:background .35s,border-color .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.sm-i::before,.sm-i::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.5px;background:var(--ink);
  transform:translate(-50%,-50%) rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .35s}
.sm-i::after{--r:90deg}
.rest > summary:hover .sm-i{background:var(--acc);border-color:var(--acc)}
.rest > summary:hover .sm-i::before,.rest > summary:hover .sm-i::after{background:#fff}
.rest[open] > summary .sm-i{transform:rotate(45deg)}
.rest-in{padding:8px 0 90px}

.send{background:var(--ink);color:var(--bone);padding:130px 40px;text-align:center}
.send h2{margin:0;font-size:clamp(46px,7vw,110px)}
.send .hand{display:block;margin-top:18px;color:var(--acc);font-size:34px}
.send .pill{margin-top:34px}

@media (max-width:1100px){
  .sh1{grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:40px}
  .ph.stlead img{height:clamp(300px,42vh,420px)}
}
@media (max-width:900px){
  .s7,.s8{grid-column:1/-1}
  .sh1{grid-template-columns:1fr;gap:32px;align-items:start}
  .ph.stlead{justify-self:start;align-self:start;max-width:300px;--r:-1.6deg}
  .ph.stlead img{height:330px}
  .table{gap:46px 22px}
  .s3,.s4{grid-column:span 6}.s5,.s6{grid-column:1/-1}
}
@media (max-width:767px){
  .sh1{padding:88px 20px 22px;gap:28px}
  .sh1 p{font-size:17.5px;margin-top:22px}
  .ph.stlead{max-width:250px;padding:10px 10px 0}
  .ph.stlead img{height:290px}
  .table{padding:30px 20px 74px;gap:40px 16px}
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:1/-1}
  .note.quiet{padding-left:18px}
  .ph{transform:none}
  .ph:hover{transform:translateY(-4px)}
  .note{padding:0}
  .rest{margin:0 20px}
  .rest > summary{padding:34px 0}
  .sm-h .hand{font-size:32px}
  .rest-in{padding:4px 0 60px}
  .send{padding:90px 20px}
}
@media (prefers-reduced-motion:reduce){ .ph,.sm-i,.sm-i::before,.sm-i::after{transition:none} .ph{transform:none} }