/* YukoDSP — About (text on the left, a big Yuko on the right) and Contact */
.page{position:relative;max-width:1320px;margin:0 auto;padding:136px max(16px,2.2vw) 120px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center;min-height:100vh}
.page h1{margin:0;font-size:clamp(56px,6.4vw,96px);font-weight:700;line-height:1;letter-spacing:-0.088em}
.text .lead{margin:18px 0 0;color:#000;font-size:clamp(24px,2.2vw,34px);font-weight:700;line-height:1.1;letter-spacing:-0.088em;max-width:18ch}
.text{max-width:560px}
.text p{margin:20px 0 0;font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-0.064em;color:rgba(0,0,0,.62)}
.text p b{font-weight:700;color:#000}
.vals{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.vals li{height:36px;display:inline-flex;align-items:center;padding:0 calc(16px + .032em) 0 calc(16px - .032em);border-radius:36px;background:rgba(0,0,0,.05);font-size:15px;font-weight:700;transition:background .8s var(--ease)}
.vals li.on{background:var(--yuko-1)}   /* js/about.js moves it along every 3s */
.text .sign{margin:32px 0 0;color:#000;font-size:15px;font-weight:700;letter-spacing:-0.064em}
.sign span{font-weight:500;color:rgba(0,0,0,.5)}

/* big Yuko: floats softly and leans toward the pointer; a tap makes it squish */
.yuko{position:relative;display:grid;place-items:center;aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.yuko::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,var(--yuko-1) 0,var(--yuko-3) 45%,transparent 70%);opacity:.45;filter:blur(60px)}
.yuko .float{position:relative;width:min(100%,560px);animation:yfloat 6s ease-in-out infinite}
.yuko img{display:block;width:100%;height:auto;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px),var(--ty,0px));transition:transform .5s var(--ease);user-select:none;-webkit-user-drag:none}
.yuko.squish img{animation:squish .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes yfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes squish{30%{scale:1.08 .9}60%{scale:.96 1.05}}
.yuko:focus-visible{outline:2px solid #000;outline-offset:8px;border-radius:50%}

/* contact: two big glass cards */
.links{display:flex;flex-direction:column;gap:16px}
.card{display:flex;align-items:center;gap:20px;padding:22px 22px 22px 22px;border-radius:38px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 0 0 .5px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9),0 40px 80px -30px rgba(150,70,130,.32),0 14px 30px -16px rgba(0,0,0,.14);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-3px)}
.card:focus-visible{outline:2px solid #000;outline-offset:4px}
.card .ic{flex:none;width:72px;height:72px;border-radius:24px;display:grid;place-items:center;background:rgba(0,0,0,.05)}
.card:nth-child(1) .ic{background:var(--yuko-1)}
.card:nth-child(2) .ic{background:var(--yuko-3)}
.card b{display:block;font-size:30px;font-weight:700;line-height:1;letter-spacing:-0.088em}
.card small{display:block;margin-top:6px;font-size:15px;font-weight:500;letter-spacing:-0.064em;color:rgba(0,0,0,.55)}
.card .go{margin-left:auto;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#000;color:#fff;transition:background .15s,color .15s}
.card:hover .go{background:var(--yuko-1);color:#000}
.page .mini{width:84px;height:auto;margin-bottom:20px}

/* Contact: the mascot sits above, the two links fill the height from the top of "Contact" to the end of the text.
   Pills: the icon circle and the arrow's slot are as tall as the pill minus the same 12px all round, so both sit
   concentric with its rounded ends; under the pointer the arrow pops in on a pink circle, like the home links */
.page.contact{grid-template-areas:"mini ." "text links";grid-template-rows:auto auto;row-gap:0;align-items:stretch;align-content:center}
.contact .mini{grid-area:mini}
.contact .text{grid-area:text}
.contact .links{grid-area:links;padding-top:.128em;font-size:clamp(56px,6.4vw,96px)}   /* .128em of the h1 size: from its line box down to the top of the C (Inter Bold, line-height 1) */
.contact .links>*{font-size:1rem}
.contact .card{flex:1;min-height:96px;padding:12px;box-sizing:border-box;border-radius:999px}
.contact .card .ic{width:auto;height:100%;aspect-ratio:1;border-radius:50%}
.contact .card .go{position:relative;width:auto;height:100%;aspect-ratio:1;background:none;color:#000}
.contact .card:hover .go{background:none}
.contact .card .go::before{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--yuko-1);transform:scale(0);transition:transform .2s ease-in}
.contact .card .go svg{position:relative;opacity:0;transform:scale(.3);transition:opacity .12s,transform .12s ease-in}
.contact .card:hover .go::before,.contact .card:focus-visible .go::before{transform:scale(1);transition:transform .38s cubic-bezier(.3,1.5,.5,1) .12s}
.contact .card:hover .go svg,.contact .card:focus-visible .go svg{opacity:1;transform:scale(1);transition:opacity .2s .3s,transform .32s cubic-bezier(.3,1.5,.5,1) .3s}

@media (max-width:900px){
.page{grid-template-columns:minmax(0,1fr);padding-top:96px;min-height:0;gap:24px}
.yuko{order:-1;width:min(78vw,380px);margin:0 auto}
.card{padding:16px;gap:14px;border-radius:30px}
.card .ic{width:56px;height:56px;border-radius:18px}
.card b{font-size:24px}
.card .go{width:44px;height:44px}
.page.contact{grid-template-areas:"mini" "text" "links";row-gap:0}
.contact .links{margin-top:24px;padding-top:0}
.contact .card{min-height:80px;padding:10px}
.contact .card .ic{width:auto;height:100%}
.contact .card .go{width:auto;height:100%}
}
@media (prefers-reduced-motion:reduce){.yuko .float,.yuko.squish img{animation:none}.yuko img{transition:none}}