@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&display=swap");

/* About page: reuses the poster, crop marks, panels, tags and animations from home.css */

/* title svg is 1000 x 300 here (home uses 1000 x 400) */
.name { top: 3.4cqw; left: 3cqw; width: 62cqw; }

/* ---------- bio ---------- */
.bio   { left: 4.6cqw; top: 31cqw; width: 55cqw; height: 36cqw; z-index: 5; transform: rotate(-1deg); }
.bio .shot { background: var(--paper); overflow: hidden; }
.bio .shot::before {                       /* soft halftone behind the text */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(95,120,153,.45) .8px, transparent 1.3px) 0 0 / 5px 5px; opacity: .18;
}
.bio .shot::after { display: none; }          /* no halftone dots over the text */
.bio .shot > * { position: relative; }
.bio .shot { padding: 3.2cqw 3.6cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.kick  { font-family: "Space Mono", monospace; font-size: 1.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-deep); opacity: .75; }
.bio h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
          font-size: 6cqw; line-height: .95; color: var(--ink-deep); }
.bio p  { font-family: "Archivo", sans-serif; font-weight: 500; font-size: 1.5cqw; line-height: 1.65; color: var(--ink-deep); max-width: 46cqw; }

/* ---------- photo ---------- */
.photo { left: 65.5cqw; top: 10.5cqw; width: 29.5cqw; height: 30.5cqw; z-index: 2; transform: rotate(1.8deg); }
.photo img { object-position: 50% 28%; }
.photo .tag .arrow { font-size: 2cqw; }
.photo .tag { left: -2.2cqw; bottom: -1.8cqw; font-size: 3.4cqw; padding: .7cqw 1.5cqw .55cqw 1.2cqw; transform: rotate(-2deg); clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }

/* ---------- social buttons ---------- */
.socials { position: absolute; z-index: 6; left: 65.5cqw; top: 45.6cqw; width: 29.5cqw; display: flex; flex-direction: column; gap: 1.3cqw; }
.socials a {
  height: 6.6cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw 0 2.6cqw;
  background: var(--ink-deep); color: var(--paper);
  font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 3.2cqw; line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.1cqw) 100%, 1.1cqw 100%);
  transition: background .25s, color .25s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.socials a:nth-child(2) { transform: translateX(1.2cqw); }
.socials a span { font-family: "Space Mono", monospace; font-size: 2.4cqw; transition: transform .25s; }
.socials a:hover { background: var(--ink); transform: translateX(-.8cqw); }
.socials a:nth-child(2):hover { transform: translateX(.4cqw); }
.socials a:hover span { transform: translate(.4cqw, -.4cqw); }

/* sparkle next to the photo, same mark as the home page */
.orbit.star { z-index: 8; }

/* footer */
.mono.back { left: 5cqw; bottom: 1.5cqw; transition: transform .25s, color .25s; }
.mono.back:hover { transform: translateX(-.6cqw); color: var(--ink-deep); }

/* ---------- phone ---------- */
/* Full width, exactly the visible height (see home.css). The title and the profile card are sized by width so the
   text stays big; only the square photo and the social buttons next to it shrink (--p) on short phones
   so the page still fits without scrolling. */
@media (max-width: 720px) {
  .poster { --p: min(50cqw, calc(100svh - 126cqw));   /* photo side: square, shrinks only on very short phones */
            --shift: max(0px, calc((100svh - 126cqw - var(--p)) / 2)); }
  .name   { left: 22cqw; width: 56cqw; top: calc(8cqw + var(--shift)); }
  .bio    { left: 5cqw; top: calc(33cqw + var(--shift)); width: 90cqw; height: auto; }
  .bio .shot { position: relative; }   /* the card is as tall as its text: no empty space at the bottom */
  .bio .shot { padding: 4.5cqw 2.5cqw 4.5cqw 4.5cqw; gap: 2.2cqw; }
  .kick   { font-size: 3cqw; }
  .bio h2 { font-size: 10cqw; }
  .bio p  { font-size: 3.7cqw; line-height: 1.4; max-width: none; text-wrap: pretty; }
  .photo  { left: 7cqw; top: calc(112cqw + var(--shift)); width: var(--p); height: var(--p); z-index: 6; }   /* square, overlaps the card a little */
  .photo .tag { font-size: 6cqw; left: -3cqw; bottom: -3cqw; }
  .photo .tag .arrow { font-size: 4cqw; }
  .socials { left: 55.5cqw; top: calc(112cqw + var(--shift)); width: 38.5cqw; height: var(--p); justify-content: center; gap: 2cqw; }
  .socials a { height: 10cqw; font-size: 5.4cqw; padding: 0 4cqw 0 3.4cqw; clip-path: polygon(0 0, 100% 0, calc(100% - 2.4cqw) 100%, 2.4cqw 100%); }
  .socials a span { font-size: 4.2cqw; }
  .orbit.star { display: none; }
  .mono.back { bottom: 3cqw; left: 6cqw; font-size: 2.4cqw; }
}

/* fade the social buttons in with the rest of the page, so they don't show up solid before the panels do */
@media (prefers-reduced-motion: no-preference) {
  .socials { animation: rise .9s cubic-bezier(.2,.8,.2,1) .15s both; }
}