/* Tony Farah's links: a soft sky, his four puzzle colors, and a missing piece by every button. */
:root {
  --pz-red: #D25E4A;    --pz-red-soft: #FBEAE6;    --pz-red-ink: #A8432F;
  --pz-yellow: #DFA935; --pz-yellow-soft: #FCF3DC; --pz-yellow-ink: #8C6510;
  --pz-blue: #4A82C0;   --pz-blue-soft: #E7EFF9;   --pz-blue-ink: #2F6299;
  --pz-green: #5D9859;  --pz-green-soft: #E7F1E4;  --pz-green-ink: #3E7139;
  --sky: #E8F1FA; --sky-deep: #D3E4F5; --ink: #1F2A37; --ink-2: #4A5563; --white: #FFFFFF;
  --head: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .7, .25, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; color: var(--ink); font: 400 16px/1.5 var(--body);
  background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 38%, #F6F9FC 100%) fixed;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* a few soft clouds and loose pieces drifting in the sky behind everything */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; width: 220px; height: 70px; border-radius: 999px; background: rgba(255, 255, 255, .75); filter: blur(1px); }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 90px; height: 90px; left: 34px; top: -44px; }
.cloud::after { width: 120px; height: 110px; left: 92px; top: -62px; }
.cloud.a { left: -60px; top: 9vh; transform: scale(.9); }
.cloud.b { right: -80px; top: 30vh; transform: scale(.7); opacity: .8; }
.cloud.c { left: 8vw; bottom: 8vh; transform: scale(.55); opacity: .7; }
.loose { position: absolute; width: 34px; height: 34px; opacity: .35; }
.loose.r { right: 9vw; top: 12vh; color: var(--pz-red); transform: rotate(18deg); }
.loose.y { left: 6vw; top: 46vh; color: var(--pz-yellow); transform: rotate(-24deg); }
.loose.b { right: 6vw; bottom: 16vh; color: var(--pz-blue); transform: rotate(40deg); }
.loose.g { left: 14vw; bottom: 30vh; color: var(--pz-green); transform: rotate(-8deg); width: 26px; height: 26px; }
.loose svg { width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 760px) { .loose.y, .loose.g, .loose.b, .cloud.c { display: none; } }

.card { width: 100%; max-width: 460px; margin: 0 auto; }

/* ---------- who he is ---------- */
.me { text-align: center; }
.photo { position: relative; width: 132px; height: 132px; margin: 0 auto 18px; }
.photo img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block;
  border: 4px solid var(--white); box-shadow: 0 14px 30px -14px rgba(31, 42, 55, .45); background: var(--white); }
/* four small pieces tucked around the photo, one in each of his colors */
.photo .tuck { position: absolute; width: 30px; height: 30px; filter: drop-shadow(0 3px 4px rgba(31, 42, 55, .2)); }
.photo .tuck svg { width: 100%; height: 100%; display: block; }
.tuck.r { color: var(--pz-red); left: -6px; top: 8px; transform: rotate(-20deg); }
.tuck.y { color: var(--pz-yellow); right: -8px; top: 2px; transform: rotate(25deg); }
.tuck.b { color: var(--pz-blue); left: -2px; bottom: 0; transform: rotate(160deg); }
.tuck.g { color: var(--pz-green); right: -4px; bottom: 6px; transform: rotate(-110deg); }
.tuck svg { fill: currentColor; }
h1 { margin: 0; font: 800 clamp(30px, 8vw, 36px)/1.05 var(--head); letter-spacing: -.02em; text-wrap: balance; }
.bio { margin: 10px auto 0; max-width: 32em; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

/* ---------- the buttons ---------- */
.links { display: grid; gap: 12px; margin-top: 26px; }
.link {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr);
  align-items: center; column-gap: 12px; width: 100%; min-height: 70px; padding: 10px 14px 10px 10px; border-radius: 20px;
  background: var(--white); color: var(--ink); -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(31, 42, 55, .06), 0 10px 26px -18px rgba(31, 42, 55, .5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) {
  .link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--c), 0 16px 30px -18px rgba(31, 42, 55, .55); }
}
.link:active { transform: translateY(0) scale(.99); }
.link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.label { display: grid; gap: 2px; min-width: 0; }
.label b { font: 700 clamp(15.5px, 4.2vw, 17px)/1.25 var(--head); letter-spacing: -.005em; }
.label small { font-size: 14px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.c-red { --c: var(--pz-red); --soft: var(--pz-red-soft); --cink: var(--pz-red-ink); }
.c-yellow { --c: var(--pz-yellow); --soft: var(--pz-yellow-soft); --cink: var(--pz-yellow-ink); }
.c-blue { --c: var(--pz-blue); --soft: var(--pz-blue-soft); --cink: var(--pz-blue-ink); }
.c-green { --c: var(--pz-green); --soft: var(--pz-green-soft); --cink: var(--pz-green-ink); }

/* the slot: the outline of the missing piece in the button's color; the piece drops into it */
.slot { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--soft); }
.slot svg { position: absolute; width: 32px; height: 32px; overflow: visible; }
.slot-shape { fill: color-mix(in srgb, var(--c) 10%, #fff); stroke: var(--c); stroke-width: 6; stroke-opacity: .6; stroke-linejoin: round; }
.piece { fill: var(--c); opacity: 0; filter: drop-shadow(0 3px 3px rgba(31, 42, 55, .25)); }
.link.is-found .slot-shape { stroke-opacity: 1; }
.link.is-found .piece { opacity: 1; }

/* the chevron on the social media button turns when the list opens */
.chev { width: 22px; height: 22px; color: var(--cink); transition: transform .3s var(--ease); }
.chev path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#socialToggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* the list of social accounts opens under its button */
.social { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.social.is-open { grid-template-rows: 1fr; }
.social-in { overflow: hidden; min-height: 0; margin-right: -12px; padding-right: 12px; }
.social-list { list-style: none; margin: 12px 0 0; padding: 4px 0 16px 18px; display: grid; gap: 10px; border-left: 3px dotted var(--pz-green); margin-left: 34px; }
.social .link { min-height: 60px; grid-template-columns: 44px minmax(0, 1fr); border-radius: 16px; }
.social .link:focus-visible { outline-offset: -3px; }
#socialToggle { grid-template-columns: 52px minmax(0, 1fr) auto; }
.social .slot { width: 44px; height: 44px; border-radius: 13px; }
.social .slot svg { width: 27px; height: 27px; }
.link.soon { cursor: default; }

/* ---------- his motto, small, at the end ---------- */
.motto { margin: 30px 0 0; text-align: center; font: 700 15px/1.4 var(--head); color: var(--ink-2); letter-spacing: .01em; }
.motto span { color: var(--pz-blue-ink); }

@media (prefers-reduced-motion: reduce) {
  .link, .chev, .social { transition: none; }
}