/* =========================================================
   Sections: about, projects, modal, claude, skills,
   certifications, timeline, contact, footer
   ========================================================= */

.subhead {
  margin: var(--space-8) 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
    gap: var(--space-8);
  }
}

/* Portrait with radar-style corner brackets */
.portrait {
  margin: 0;
  width: min(100%, 360px);
  justify-self: center;
  display: grid;
  gap: var(--space-3);
}

.portrait__frame {
  position: relative;
  padding: 10px;
}

.portrait__frame::before,
.portrait__frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent);
  pointer-events: none;
}

.portrait__frame::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.portrait__frame::after {
  right: 0;
  bottom: 0;
  border-left: 0;
  border-top: 0;
}

.portrait__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

.portrait__caption {
  justify-self: center;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about__text {
  display: grid;
  gap: var(--space-5);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}

.about__text p:first-child {
  color: var(--text);
}

/* Specialties */
.spec-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .spec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.spec {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-1) var(--space-3);
  align-content: start;
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--line-strong);
  transition: border-color var(--dur-2) ease;
}

.spec:hover {
  border-top-color: var(--accent);
}

.spec__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
}

.spec__title {
  font-size: var(--step-1);
  font-weight: 600;
}

.spec__body {
  font-size: var(--step--1);
  color: var(--text-muted);
}
.about__counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  max-width: 40rem;
}

.about__counts div {
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
}

.about__counts dd {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.about__counts dt {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Project media (shared) ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform var(--dur-3) var(--ease-out);
}

/* ---------- Flagship case study ---------- */
.flagship {
  display: grid;
  overflow: hidden;
  margin-bottom: var(--space-6);
  border-color: color-mix(in srgb, var(--alert) 35%, var(--line));
}

.flagship::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--alert), var(--accent) 50%, transparent);
  z-index: 1;
}

.flagship__top {
  display: grid;
}

.flagship .media {
  border-radius: 0;
  background: #0b0f14; /* matches the composed screenshot's backdrop */
}

/* Show the whole composition; the matching backdrop hides the letterbox */
.flagship .media img {
  object-fit: contain;
}

.flagship__intro {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6) var(--space-5);
}

@media (min-width: 960px) {
  .flagship__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .flagship .media {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .flagship__intro {
    padding: var(--space-7);
  }
}

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

.flagship__tagline {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--alert);
  letter-spacing: 0.02em;
}

.flagship__title {
  font-size: var(--step-4);
  font-weight: 700;
}

.flagship__pitch {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
}

.flagship__note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text);
}

.flagship__note::before {
  content: "▲ ";
  color: var(--accent-text);
}

/* Case-study strip: problem → architecture → role → challenges */
.case {
  display: grid;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .case {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .case {
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr;
  }
}

.case__step {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .case__step {
    border-right: 1px solid var(--line);
  }
}

@media (min-width: 1200px) {
  .case__step {
    border-bottom: 0;
    padding: var(--space-6) var(--space-5);
  }
  .case__step:last-child {
    border-right: 0;
  }
  /* arrow connectors between steps */
  .case__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 2.1rem;
    width: 11px;
    height: 11px;
    border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    background: var(--surface);
    transform: rotate(45deg);
    z-index: 1;
  }
}

.case__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.case__step p,
.case__step li {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}

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

.arch li {
  position: relative;
  padding-left: 1.9rem;
  counter-increment: arch;
}

.arch li::before {
  content: counter(arch, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--signal-text);
}

.challenge + .challenge {
  margin-top: var(--space-3);
}

.challenge h4 {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.flagship__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

/* ---------- Project cards ---------- */
.project-grid {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

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


.project-grid > li {
  perspective: 1000px;
}

.project {
  height: 100%;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
  will-change: transform;
}

.project:hover {
  border-color: var(--line-strong);
}

.project.is-tilting {
  transition: transform 80ms linear, border-color var(--dur-2) ease;
}

.project__body {
  flex: 1;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project__title {
  font-size: var(--step-2);
}

.project-grid--compact .project__title {
  font-size: var(--step-1);
}

.project__pitch {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.project__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}

/* Whole-card click target via the title button */
.project__open {
  all: unset;
  cursor: pointer;
}

.project__open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-m);
}

.project__open:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project__actions a,
.project__actions .todo {
  position: relative;
  z-index: 1;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text);
  text-decoration: none;
}

.text-link:hover {
  color: var(--accent-text);
}

.text-link svg {
  width: 1em;
  height: 1em;
}

.muted-note {
  color: var(--text-muted);
}

.contact-link__value .muted-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-faint);
}

.project__more {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.project:hover .project__more {
  color: var(--accent-text);
}

/* ---------- Modal ---------- */
.modal {
  width: min(100% - 2rem, 860px);
  max-height: min(100% - 2rem, 900px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.6);
  overflow: hidden;
}

.modal::backdrop {
  background: rgb(5 8 12 / 0.7);
  backdrop-filter: blur(6px);
}

/* The panel scrolls; the close button is pinned to the dialog itself. */
.modal__panel {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
}

.modal .media {
  border-radius: 0;
}

.modal__content {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-7);
}

@media (min-width: 768px) {
  .modal__content {
    padding: var(--space-6) var(--space-7) var(--space-7);
  }
}

.modal__title {
  font-size: var(--step-3);
}

.modal h3 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}

.modal p,
.modal li {
  color: var(--text-muted);
}

.modal .flagship__tagline {
  color: var(--alert);
}

.modal .flagship__note {
  color: var(--text);
}

.modal .arch li,
.modal .challenge p {
  font-size: var(--step-0);
}

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

@media (prefers-reduced-motion: no-preference) {
  .modal[open] {
    animation: modal-in 450ms var(--ease-out);
  }
  .modal[open]::backdrop {
    animation: fade-in 300ms ease;
  }
  .modal.is-closing {
    animation: modal-out 220ms ease-in forwards;
  }
  .modal.is-closing::backdrop {
    animation: fade-in 220ms ease reverse forwards;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
}

@keyframes modal-out {
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Building with Claude ---------- */
.section--claude {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg);
}

.workflow {
  --flow-dur: 7.5s;
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

/* the wire the "packet" travels along */
.workflow::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--line-strong);
}

.workflow__packet {
  position: absolute;
  left: calc(1.4rem - 4px);
  top: 1.5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px var(--accent-glow);
  opacity: 0;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4);
  padding-left: 0;
  counter-increment: flow;
}

.flow-step__node {
  grid-row: span 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.flow-step__name {
  font-size: var(--step-1);
  font-weight: 600;
  align-self: end;
}

.flow-step__body {
  font-size: var(--step--1);
  color: var(--text-muted);
}

@media (min-width: 960px) {
  .workflow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .workflow::before {
    left: 1.4rem;
    right: calc(20% - 1.4rem);
    top: 1.4rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .workflow__packet {
    top: calc(1.4rem - 4px);
    left: 1.4rem;
  }
  .flow-step {
    grid-template-columns: 1fr;
    padding: 0;
    align-content: start;
  }
  .flow-step__node {
    grid-row: auto;
    margin-bottom: var(--space-3);
  }
  .flow-step__name {
    align-self: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .workflow.is-visible .workflow__packet {
    animation: packet-v var(--flow-dur) var(--ease-in-out) infinite;
  }
  .workflow.is-visible .flow-step__node {
    animation: node-hit var(--flow-dur) linear infinite;
    animation-delay: calc(var(--i) * var(--flow-dur) * 0.2 - var(--flow-dur) * 0.02);
  }
  @media (min-width: 960px) {
    .workflow.is-visible .workflow__packet {
      animation-name: packet-h;
    }
  }
}

@keyframes packet-v {
  0% { opacity: 0; transform: translateY(0); }
  4% { opacity: 1; }
  92% { opacity: 1; transform: translateY(var(--travel, 0px)); }
  100% { opacity: 0; transform: translateY(var(--travel, 0px)); }
}

@keyframes packet-h {
  0% { opacity: 0; transform: translateX(0); }
  4% { opacity: 1; }
  92% { opacity: 1; transform: translateX(var(--travel, 0px)); }
  100% { opacity: 0; transform: translateX(var(--travel, 0px)); }
}

@keyframes node-hit {
  0%, 18%, 100% {
    border-color: var(--line-strong);
    color: var(--text-muted);
    box-shadow: none;
  }
  3%, 10% {
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 0 0 5px var(--accent-soft);
  }
}

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

@media (min-width: 768px) {
  .specialties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .specialties {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .specialties > li {
    grid-column: span 2;
  }
  .specialties > li:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

.specialty {
  height: 100%;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

.specialty:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.specialty__icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
}

.specialty h3 {
  font-size: var(--step-1);
}

.specialty p {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.specialty--emphasis {
  background: linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* ---------- Skills ---------- */
.skills {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .skills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.skill-group {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5);
}

.skill-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skill-group__head h3 {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  color: var(--text);
}

.skill-group__head span {
  color: var(--text-faint);
}

.skill-group .chip {
  font-size: var(--step--1);
}

/* chips pop in one after another when the group is revealed */
@media (prefers-reduced-motion: no-preference) {
  .js .skill-group .chip {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), color var(--dur-1) ease,
      border-color var(--dur-1) ease, background-color var(--dur-1) ease;
    transition-delay: calc(var(--c, 0) * 45ms + 200ms), calc(var(--c, 0) * 45ms + 200ms), 0s, 0s, 0s;
  }
  .js .skill-group.is-visible .chip {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Certifications ---------- */
.certs {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  /* 7 certs: the first spans two columns → two full rows of four */
  .certs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .certs > li:first-child {
    grid-column: span 2;
  }
  .certs > li:not(:first-child) .cert__title {
    font-size: var(--step-0);
  }
  .certs > li:first-child .cert {
    background: linear-gradient(150deg, var(--signal-soft), transparent 55%), var(--surface);
  }
}

.cert {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  overflow: hidden;
  transition: border-color var(--dur-2) ease;
}

.cert:hover {
  border-color: var(--signal);
}

.cert__badge {
  width: 52px;
  height: 58px;
  color: var(--signal);
}

.cert__body {
  display: grid;
  gap: var(--space-2);
}

.cert__issuer {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cert__title {
  font-size: var(--step-1);
  line-height: 1.2;
}

.cert--todo {
  border-style: dashed;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.cert--todo .cert__badge {
  color: var(--accent);
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  max-width: 52rem;
}

.timeline__track {
  position: absolute;
  left: 7px;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.timeline__fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--accent), var(--signal));
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}

@media (prefers-reduced-motion: reduce) {
  .timeline__fill {
    transform: none;
  }
}

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

.tl-item {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-7);
}

.tl-item .tl-item__date {
  margin-bottom: var(--space-1);
}

.tl-item__dot {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

.tl-item.is-visible .tl-item__dot {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.tl-item--future .tl-item__dot {
  border-style: dashed;
}

.tl-item__date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
  padding-top: 0.15rem;
}

.tl-item__date .todo {
  font-size: var(--step--2);
}

.tl-item h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-1);
}

.tl-item p {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* ---------- Contact ---------- */
.section--contact {
  overflow: hidden;
  background: radial-gradient(ellipse 60% 60% at 85% 100%, var(--signal-soft), transparent 70%), var(--bg);
}

.contact {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 960px) {
  .contact {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.contact__head {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.contact__title {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.contact__links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.contact-link {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, padding var(--dur-2) var(--ease-out);
}

a.contact-link:hover {
  background: var(--bg-raised);
  padding-left: var(--space-4);
}

.contact-link__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-link__value {
  font-size: var(--step-1);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.contact-link__arrow {
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease;
}

a.contact-link:hover .contact-link__arrow {
  color: var(--accent-text);
  transform: translate(3px, -3px);
}

@media (max-width: 479px) {
  .contact-link {
    grid-template-columns: 1fr auto;
  }
  .contact-link__label {
    grid-column: 1 / -1;
  }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-6);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
}

.footer__name {
  color: var(--text);
}

.footer__meta {
  font-size: var(--step--2);
}

.footer__top {
  font-size: var(--step--2);
  text-decoration: none;
  color: var(--text-muted);
}

.footer__top:hover {
  color: var(--accent-text);
}