/* =========================================================================
   about-sheet.css — About option 2: a clean off-white sheet on the sky
   (after the Sulake layout), with a photo sticker and the logo stamp.
   Markup: js/components/about/sheet.js.
   ========================================================================= */

.sheet{position:relative;width:min(1040px,100%);height:min(calc(100vh - 210px),640px);min-height:440px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(22px,3vw,44px);background:#f2f2ef;color:#111;box-shadow:0 50px 100px -50px rgba(20,40,90,.5)}

/* top row: small intro (left) and "About /26" (right) */
.sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.sh-intro{margin:0;max-width:30ch;font-size:clamp(13px,1vw,15px);line-height:1.5;color:#33363c}
.sh-index{margin:0;text-align:right;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(26px,2.4vw,40px);line-height:1}

/* the big slash-separated line; each item stays on one line, every line ends with a slash */
.sh-list{margin:0;align-self:center;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(28px,3.3vw,52px);line-height:1.14;text-transform:uppercase;letter-spacing:.005em}
.sh-i{white-space:nowrap}
.sh-me{border-bottom:1.5px solid #111;cursor:default;transition:color .3s}
.sh-me:hover,.sh-me:focus-visible{color:#6b6f76;outline:none}

/* footer: follow links · call to action · copyright */
.sh-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;font-size:clamp(11px,.85vw,13px);color:#33363c}
.sh-foot a{color:#111}
.sh-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.sh-cta{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(18px,1.5vw,24px);border-bottom:1px solid #111;padding-bottom:2px}
.sh-cta:hover{text-decoration:none!important}
.sh-cta span{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sh-cta:hover span{transform:translateX(6px)}

/* the photo sticker, tilted, hanging off the right edge, with a peeled corner */
.sh-sticker{position:absolute;right:-5%;top:33%;width:clamp(130px,15vw,200px);aspect-ratio:4/5;padding:8px;background:#fff;border-radius:18px;box-shadow:0 2px 0 rgba(0,0,0,.04),0 18px 40px -16px rgba(20,40,90,.55);transform:rotate(7deg);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;z-index:2}
.sh-sticker img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:12px}
.sh-sticker::after{content:"";position:absolute;right:0;bottom:0;width:34px;height:34px;border-radius:0 0 18px 0;background:linear-gradient(135deg,transparent 50%,#e9e9e6 50%,#fff 80%);box-shadow:-2px -2px 6px rgba(0,0,0,.08)}
.sh-sticker:hover{transform:rotate(2deg) translateY(-6px) scale(1.03);box-shadow:0 2px 0 rgba(0,0,0,.04),0 30px 60px -20px rgba(20,40,90,.6)}

/* the logo stamp in the empty top-centre area */
.sh-stamp{position:absolute;left:43%;top:9%;width:clamp(130px,12.5vw,180px);transform:rotate(-8deg);opacity:.92}

/* hovering the name shows the photo beside the cursor */
.sh-peek{position:fixed;left:0;top:0;z-index:30;width:min(220px,30vw);aspect-ratio:3/4;object-fit:cover;pointer-events:none;opacity:0;transform:translate3d(-999px,0,0);transition:opacity .3s;box-shadow:0 30px 60px -30px rgba(20,40,90,.55)}
.sh-peek.on{opacity:1}

@media (hover:none),(pointer:coarse){.sh-peek{display:none}}
@media (max-width:760px){
  .sheet{height:auto;min-height:calc(100vh - 140px);gap:28px}
  .sh-list{font-size:9vw}
  .sh-br{display:none}
  .sh-foot{flex-direction:column;align-items:flex-start}
  .sh-stamp{left:auto;right:6%;top:auto;bottom:22%;width:96px}
}