/* ==========================================================================
   TENTANG
   ========================================================================== */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.about-photo { position: sticky; top: 96px; margin: 0; }
.about-photo img { width: 100%; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.about-photo figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 8px; }
.lang-switch { margin-bottom: 18px; }
.about .prose { font-size: 21px; }
.cv { margin-top: 56px; }
.cv h2 { font-family: var(--hand); font-weight: 400; font-size: 48px; color: var(--ink); margin: 44px 0 10px; line-height: 1; }
.cv h3 { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--muted); margin: 20px 0 6px; letter-spacing: .08em; }
.cv ul { list-style: none; margin: 0; padding: 0; }
.cv li { border-top: 1px solid var(--line); padding: 9px 0; font-size: 18px; line-height: 1.4; }
.cv li span { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.accounts-title { font-family: var(--display); font-weight: 300; font-size: clamp(40px, 4.4vw, 62px); line-height: 1; margin: 56px 0 0; letter-spacing: -.01em; }
.accounts { display: grid; gap: 0; margin-top: 20px; border-top: 1.5px solid var(--graphite); }
.account {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px 24px;
  padding: 16px 4px 14px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .3s, padding .4s var(--ease);
}
.account .handle { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.01em; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .handle b { font-weight: 300; color: var(--ink); }
.account .mono { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.account .arrow { font-family: var(--mono); color: var(--ink); transition: transform .4s var(--ease); }
.account:hover { background: rgb(255 255 255 / .45); padding-left: 14px; }
.account:hover .handle { font-style: italic; }
.account:hover .arrow { transform: translate(4px, -4px); }
.specimen { margin-top: 56px; padding: 24px; background: var(--sheet); box-shadow: var(--shadow-paper); }
.specimen p { font-family: var(--hand); color: var(--ink); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; margin: 10px 0 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 340px; }
  .account { grid-template-columns: minmax(0, 1fr) auto; }
  .account .mono { grid-column: 1; grid-row: 2; }
  .account .arrow { grid-row: 1 / span 2; align-self: center; }
}