/* Info (about) and Skills. */

.info__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

/* ---- portrait / custom visual */
.info__visual {
  grid-column: 1 / span 4;
  position: sticky;
  top: 96px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: radial-gradient(90% 70% at 50% 40%, rgba(255, 255, 255, 0.07), transparent 70%), var(--surface);
  isolation: isolate;
}
.info__art,
.info__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.info__img {
  object-fit: cover;
  transition: filter 0.9s var(--ease);
}
@media (hover: hover) {
  [data-mode='monochrome'].info__visual:hover .info__img {
    filter: grayscale(0) contrast(1) brightness(1);
  }
}
.info__caption {
  position: absolute;
  z-index: 2;
  inset: auto 16px 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

/* ---- text */
.info__text {
  grid-column: 6 / -1;
}
.info__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 0.9rem + 4.1vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.info__statement .accent {
  font-size: 1.06em;
  letter-spacing: -0.02em;
}
.info__prose {
  display: grid;
  gap: 1.1em;
  max-width: 54ch;
  margin-top: clamp(28px, 4vw, 56px);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: #cfcfcf;
  text-wrap: pretty;
}
.info__rows {
  margin-top: clamp(48px, 7vw, 104px);
}
.info__row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 3fr;
  column-gap: var(--col-gap);
  padding: 22px 0 26px;
  border-top: 1px solid var(--border);
}
.info__row:last-child {
  border-bottom: 1px solid var(--border);
}
.info__row dt {
  padding-top: 0.45em;
  color: var(--text-meta);
}
.info__row dd {
  margin: 0;
  min-width: 0;
}
.info__focus {
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.info__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.info__list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text);
}
.info__list li:nth-last-child(-n + 2):nth-child(odd),
.info__list li:last-child {
  border-bottom: 0;
}
.info__entries {
  display: grid;
}
.entry {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) 4fr;
  column-gap: var(--col-gap);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.entry:last-child {
  border-bottom: 0;
}
.entry__when {
  padding-top: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-meta);
}
.entry__title {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.entry__sub,
.entry__desc {
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* ================================================================== skills */
.skills__note {
  color: var(--text-meta);
  text-align: right;
  text-wrap: balance;
}
.skills__title {
  margin-top: calc(-1 * clamp(8px, 2vw, 32px));
}
.skills__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 56px) var(--col-gap);
  margin-top: clamp(40px, 6vw, 88px);
}
.skillcat {
  border-top: 1px solid var(--border-strong);
  padding-top: 18px;
}
.skillcat__name {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}
.skillcat__items li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 1rem;
  transition: color 0.35s var(--ease), padding-left 0.5s var(--ease), opacity 0.35s var(--ease);
}
@media (hover: hover) {
  .skillcat__items li:hover {
    color: var(--text);
    padding-left: 10px;
  }
  .skills__grid:has(li:hover) li:not(:hover) {
    opacity: 0.5;
  }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .skills__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .info__visual {
    grid-column: 1 / span 7;
    position: relative;
    top: auto;
    aspect-ratio: 4 / 3;
  }
  .info__text {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .info__visual {
    grid-column: 1 / -1;
  }
  .info__row {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .info__list {
    grid-template-columns: 1fr;
  }
  .info__list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--border);
  }
  .skills__grid {
    grid-template-columns: 1fr;
  }
  .skills__note {
    display: none;
  }
}