/* =========================================================================
   about.css — shared by all About designs: the centred stage on the sky,
   and the portrait that can swap to another character style on hover.
   Each design has its own file: about-poster.css, about-sheet.css, about-pass.css.
   ========================================================================= */

/* the About page centres one designed object on the sky */
.page-in.about{min-height:100vh;display:grid;place-items:center;padding-block:96px 32px;box-sizing:border-box}

/* ---------- portrait swap (used by the poster design; ready for AI-made characters) ---------- */
.me{position:relative;aspect-ratio:3/4;overflow:hidden;background:#dfe3ea;cursor:pointer;outline-offset:-3px}
.me:focus-visible{outline:2px solid #111}
.me-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.me-layer.in{animation:meIn .7s cubic-bezier(.7,0,.2,1) both}
@keyframes meIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.me-tag{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;background:#fff;padding:7px 11px 7px 9px}
.me-tag span{font-size:10.5px;letter-spacing:.08em;color:#6b6f76;font-variant-numeric:tabular-nums;padding-right:8px;border-right:1px solid #e3e5e9}
.me-tag b{font-family:var(--display);font-style:italic;font-weight:500;font-size:16px}
.me-hint{position:absolute;right:12px;top:12px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;transition:opacity .4s}
.me.used .me-hint{opacity:0}

/* ---------- the logo as a rubber stamp (shared by the sheet and pass designs) ---------- */
.stamp{display:block;height:auto;mix-blend-mode:multiply;pointer-events:none}