/* ==========================================================================
   05. Pages
   --------------------------------------------------------------------------
   Home-specific composition: hero, spec sheet card, about excerpt.
   Projects index: page head, filters, document-style rows.
   Case study: engineering document (toc, sections, spec sheet, gallery).
   ========================================================================== */

/* -- Page head (shared by sub-pages) ---------------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.page-head__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.page-head h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.015em;
}

.page-head__lead {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 60ch;
}

/* -- Projects index: filters ------------------------------------------------------- */

.project-tools {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-inline-end: var(--space-2);
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.filter-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 700;
}

/* -- Projects index: search and sort ----------------------------------------------------- */

.project-tools__aux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.project-search {
  flex: 1 1 15rem;
  min-width: 0;
}

.project-search__input {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.project-search__input::placeholder {
  color: var(--color-text-faint);
}

.project-search__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.project-sort__select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.project-sort__select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* -- Projects index: card grid ----------------------------------------------------- */

.project-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.list-empty {
  padding: var(--space-7);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

/* -- Case study: document head ----------------------------------------------------------- */

.case-study {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.case-study__head {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.case-study__head h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

.case-study__summary {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-5);
}

.case-study__cover {
  margin: var(--space-6) auto 0;
  max-width: 46rem;
}

.case-study__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.case-study__meta {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.case-study__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}

.case-study__meta-row:last-child {
  border-bottom: 0;
}

.case-study__meta dt {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.case-study__meta dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: end;
}

.case-study__body {
  padding-top: var(--space-6);
}

/* -- Case study: table of contents --------------------------------------------------------- */

.toc {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.toc a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.toc a:hover {
  color: var(--color-accent);
}

.toc__num {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  min-width: 2ch;
}

/* -- Case study: numbered sections -------------------------------------------------------------- */

.doc-section {
  padding-block: var(--space-6);
  border-bottom: 1px dashed var(--color-border);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.doc-section:last-child {
  border-bottom: 0;
}

.doc-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.doc-section__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.doc-section__title {
  font-size: var(--text-2xl);
}

.doc-block {
  max-width: 65ch;
  margin-bottom: var(--space-4);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.doc-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.doc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-1);
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 1px;
  background-color: var(--color-accent);
  opacity: 0.55;
}

.doc-dl {
  margin: 0;
  display: grid;
}

.doc-dl__row {
  padding-block: var(--space-3);
  border-top: 1px dashed var(--color-border);
}

.doc-dl__row:first-child {
  border-top: 0;
}

.doc-dl dt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.doc-dl dd {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* -- Case study: links and gallery -------------------------------------------------------------- */

.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

.gallery__item {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-2);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* -- Case study: previous / next -------------------------------------------------------------------- */

.doc-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 40rem) {
  .doc-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.doc-nav__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.doc-nav__link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.doc-nav__link--empty {
  visibility: hidden;
}

.doc-nav__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.doc-nav__title {
  font-weight: 600;
}

/* -- Project not found ------------------------------------------------------------------------------ */

.not-found {
  padding-block: clamp(3rem, 10vw, 6rem);
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.not-found__lead {
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-bottom: var(--space-2);
}

/* -- Hero ---------------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-5);
  letter-spacing: -0.015em;
}

.hero__sub {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-bottom: var(--space-4);
}

.hero__evidence {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* -- Spec sheet card --------------------------------------------------------------------------- */

.spec-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.spec-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.spec-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}

.spec-card__rows {
  margin: 0;
  padding: var(--space-1) var(--space-4);
}

.spec-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px dashed var(--color-border);
}

.spec-card__row:last-child {
  border-bottom: 0;
}

.spec-card__row dt {
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.spec-card__row dd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: end;
}

/* Rotating job title: every title shares one grid cell, so the element
   sizes to the widest title and never shifts the row (CLS = 0). */
.rotating-title {
  display: inline-grid;
  grid-template-columns: max-content;
}

.rotating-title__item {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-in-out);
}

.rotating-title__item.is-active {
  opacity: 1;
}

/* -- About excerpt ------------------------------------------------------------------------------- */

.about-home__intro {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.about-home__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.about-home__more {
  margin-top: var(--space-6);
}

/* -- Blog: index and article --------------------------------------------------------------------- */

.blog-entries {
  display: grid;
  gap: var(--space-5);
}

.blog-post {
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.blog-post:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.blog-post__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
}

.blog-post__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.blog-post__title a:hover {
  color: var(--color-accent);
}

.blog-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.blog-post__summary {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.read-more::after {
  content: "\2192";
  transition: transform var(--dur-base) var(--ease-out);
}

:lang(ar) .read-more::after {
  content: "\2190";
}

.read-more:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.read-more:hover::after {
  transform: translateX(0.2em);
}

:lang(ar) .read-more:hover::after {
  transform: translateX(-0.2em);
}

.empty-state {
  padding: var(--space-7);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.blog-post-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.blog-post-wrapper {
  padding-block: var(--space-6) var(--space-10);
}

.blog-nav {
  margin-bottom: var(--space-5);
}

.blog-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.blog-nav a::before {
  content: "\2190";
  transition: transform var(--dur-base) var(--ease-out);
}

:lang(ar) .blog-nav a::before {
  content: "\2192";
}

.blog-nav a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.blog-nav a:hover::before {
  transform: translateX(-0.2em);
}

:lang(ar) .blog-nav a:hover::before {
  transform: translateX(0.2em);
}

.blog-post-wrapper h1 {
  margin-bottom: var(--space-3);
  font-size: var(--text-3xl);
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.blog-post-content {
  max-width: 46rem;
}

.blog-post-heading {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.blog-post-heading:first-child {
  margin-top: 0;
}

.doc-code {
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  white-space: pre;
}

.doc-code code {
  font-family: var(--font-mono);
}

.doc-quote {
  margin: var(--space-5) 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-accent);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 60ch;
}

.blog-post-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* -- FAQ page ------------------------------------------------------------------------------------ */

.faq-container {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: var(--space-3) var(--space-8);
}

.faq-grid {
  display: grid;
  gap: var(--space-4);
  counter-reset: faq;
}

.faq-item {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.faq-item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.faq-item::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.faq-question {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.faq-answer {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.faq-answer p {
  margin: 0;
}

/* -- About page --------------------------------------------------------------------------------- */

.about-grid {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: var(--space-3) var(--space-8);
  display: grid;
  gap: var(--space-6);
}

.about-section {
  padding-block: var(--space-3);
}

.about-section:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.about-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.about-section__title::before {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-accent);
}

.about-section__content {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 62ch;
}

.principles-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.principles-list li:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.principles-list li::before {
  content: "\2713";
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-accent);
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.tech-category {
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.tech-category:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.tech-category h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

:lang(ar) .tech-category h3 {
  letter-spacing: 0;
}

.tech-category ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-category li {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.workflow-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: workflow;
}

.workflow-list li {
  counter-increment: workflow;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.workflow-list li:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.workflow-list li::before {
  content: counter(workflow, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* -- Contact page ------------------------------------------------------------------------------- */

.contact-grid {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: var(--space-3) var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info,
.social-links {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.contact-info:hover,
.social-links:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.contact-info h2,
.social-links h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.contact-info h2::before,
.social-links h2::before {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-accent);
}

.info-item {
  display: grid;
  gap: var(--space-1);
}

.info-item + .info-item {
  margin-top: var(--space-5);
}

.info-item__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
}

.info-item__value {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.info-item__value[href] {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.info-item__value[href]:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.social-links ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.social-links li:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.social-links__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.social-links li a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.social-links li a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}