/* about.css — the two typed "letter" cards on the About page
   (bio on the left, a note on the writing on the right). */

/* About-page sidebars: a lighter-green backdrop (matching the new SVG art:
   a giant robot leg on the left, a star system on the right — both drawn in
   off-white, yellow and brown). Scoped to this page so the stories page's
   green-tab rail keeps its dark-green theme. */
body[data-page="about"] .rail{
  background:#607848;
  border-color:#607848;
  outline-color:rgba(244,236,217,.32);
}

.letters{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(18px,2.6vw,36px);
  padding:clamp(6px,1.4vh,16px) clamp(2px,1vw,12px) 6px;
}

.letter{
  flex:1 1 280px;
  min-width:0;
  position:relative;
  background:#f3ead2;
  border:1px solid rgba(33,29,22,.28);
  box-shadow:4px 6px 14px rgba(33,29,22,.18);
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,24px) clamp(16px,1.8vw,22px);
  font-family:'Special Elite', monospace;
  font-size:clamp(12px,1.02vw,13.5px);
  line-height:1.75;
  color:#322d23;
}

.letter--bio{transform:rotate(-1deg);}
.letter--work{transform:rotate(.9deg);}
.letter--ai{transform:rotate(-.6deg);}

.letter h3{
  margin:0 0 12px;
  font-size:clamp(13.5px,1.2vw,16px);
  letter-spacing:.04em;
  color:var(--green, #2f7d45);
}

.letter p{margin:0 0 9px; text-wrap:pretty;}

.letter .sign{
  margin:14px 0 0;
  text-align:right;
  font-family:'DM Serif Display', serif;
  font-size:clamp(16px,1.5vw,21px);
  color:var(--ink);
}

/* a little paperclip pinching the top of each letter */
.letter .clip{
  position:absolute;
  top:-9px;
  left:26px;
  width:13px;
  height:30px;
  border:2.5px solid var(--faint);
  border-radius:7px;
}

@media (prefers-reduced-motion:reduce){
  .letter--bio,
  .letter--work,
  .letter--ai{transform:none;}
}