:root{--paper:#f0ebe1;--ink:#322e29;--sepia:#9b8e7a;--ask:#534a3c;--rule:#cbbfa9;--foot:#a99c86;--pad:clamp(40px,5vw,72px)}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:'Lora',serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.card{display:grid;min-height:100vh;background:var(--paper);opacity:0;transition:opacity .5s ease;
 grid-template-columns:100vh 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"photo top" "photo body" "photo foot"}
.card.in{opacity:1}
.photo{grid-area:photo;position:relative;overflow:hidden;height:100vh;width:100vh;background-color:#e4ddcf}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.ph-img.in{opacity:1}
.scrim{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(0,0,0,.42));pointer-events:none}
.source{position:absolute;right:var(--pad);bottom:26px;z-index:2;font-family:'IBM Plex Sans',sans-serif;font-size:10px;
 letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.source:hover{color:#fff}
.topbar{grid-area:top;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:clamp(34px,4.4vw,60px) var(--pad) 0}
.kick{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:clamp(14px,1.15vw,16px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.lang{font-family:'IBM Plex Sans',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--foot);cursor:pointer;user-select:none;white-space:nowrap}
.lang span{cursor:pointer}.lang .on{color:var(--ink)}.lang .off{color:var(--foot)}
.body{grid-area:body;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.quote{font-family:'Lora',serif;font-weight:400;color:var(--ink);font-size:clamp(22px,2.1vw,29px);line-height:1.42;max-width:30ch}
.attr{font-family:'IBM Plex Sans',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sepia);margin-top:24px}
.rule{width:42px;height:1px;background:var(--rule);margin:26px 0}
.ask{font-family:'Lora',serif;font-style:italic;color:var(--ask);font-size:clamp(21px,2vw,26px);line-height:1.46;max-width:30ch}
.foot{grid-area:foot;display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad) 26px;
 font-family:'IBM Plex Sans',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--foot)}
.foot a{color:var(--foot);text-decoration:none}.foot a:hover{color:var(--ink)}
.foot .act{cursor:pointer;user-select:none}.foot .act:hover{color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:768px){
 .card{display:flex;flex-direction:column;min-height:100vh}
 .topbar{padding:26px 26px 0}
 .photo{width:100%;max-width:460px;height:auto;aspect-ratio:1/1;margin:22px auto 0;border-radius:3px;box-shadow:0 14px 34px rgba(60,50,40,.16)}
 .body{text-align:center;align-items:center;padding:30px 26px 0}
 .quote{max-width:24ch}.ask{max-width:26ch;font-size:clamp(21px,6vw,25px)}.rule{margin:24px auto}
 .foot{margin-top:auto;padding:34px 26px 40px}
}