/* ============================================================
   COMPONENTS
   Organised by atomic-design tier.   ATOMS → MOLECULES → ORGANISMS
   Every value comes from tokens.css. No raw px / hex / ms here.
   ============================================================ */


/* ============================================================
   ATOMS
   ============================================================ */

/* ---- atom: badge ----------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--s-h) var(--s-1);
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-xs);
  font-family:    var(--font-display);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  line-height:    var(--type-label-lh);
  letter-spacing: var(--type-label-ls);
  white-space: nowrap;
  color: var(--c-white);   /* always white so difference blend inverts on any bg */
  mix-blend-mode: difference;
}

/* ---- atom: btn ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: var(--s-5);
  padding: 0 var(--s-3);
  border-radius: var(--radius-sm);
  font-family:    var(--font-display);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast),
              border-color var(--motion-fast),
              color var(--motion-fast),
              opacity var(--motion-fast);
  color: inherit;
}
.btn--outlined {
  border: var(--border-w) solid currentColor;
  background: transparent;
}
.btn--outlined:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--c-white);
}
.btn--ghost {
  background: transparent;
}
.btn--ghost:hover {
  background: var(--action-hover);
  color: var(--c-white);
}
.btn--solid {
  background: var(--action-primary);
  color: var(--c-white);
}
.btn--solid:hover { background: var(--action-hover); }

.btn--icon {
  width: var(--s-5);
  height: var(--s-5);
  padding: 0;
}

/* Icon inside a button (external link, etc.) */
.btn__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* ---- atom: cta-link --------------------------------------
   Giant headline-as-link. Used for the home & case-study CTA.
---------------------------------------------------------- */
.cta-link {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size:   clamp(40px, 8vw, 128px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--type-display-ls);
  color: inherit;
  text-align: center;
  transition: opacity var(--motion-base);
  text-wrap: balance;
}
.cta-link:hover { opacity: 0.7; }


/* ============================================================
   MOLECULES
   ============================================================ */

/* ---- molecule: brand-mark (single brand logo) ------------ */
.brand-mark {
  height: var(--s-4);
  width: auto;
  max-width: var(--s-20);
  object-fit: contain;
}
.brand-mark--invert { filter: brightness(0) invert(1); }
.brand-mark--dark   { filter: brightness(0); }

/* ---- molecule: brand-row --------------------------------- */
.brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-3), 5vw, var(--s-8));
}

/* ---- molecule: menu-item (dropdown row) ----------------- */
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-w) solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--text-primary);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--action-hover);
  color: var(--c-white);
}
.menu-item__logo {
  flex-shrink: 0;
  width: var(--s-12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-item__logo img {
  max-width: 100%;
  max-height: var(--s-3);
  object-fit: contain;
  filter: brightness(0);
  transition: filter var(--motion-fast);
}
.menu-item:hover .menu-item__logo img,
.menu-item:focus-visible .menu-item__logo img { filter: brightness(0) invert(1); }

.menu-item__title {
  flex: 1;
  font-family: var(--font-display);
  font-size:   var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
}

/* ---- molecule: testimonial ------------------------------- */
.testimonial {
  position: relative;
  width: 100%;
  max-width: var(--reading-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: clamp(var(--s-4), 8vw, var(--s-8)) clamp(var(--s-2), 4vw, var(--s-5));
  isolation: isolate;
}
.testimonial__mark {
  position: absolute;
  width: clamp(var(--s-8), 16vw, var(--s-15));
  height: auto;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.testimonial__mark--open  { top: 0;            left: 0; }
.testimonial__mark--close { bottom: var(--s-3); right: 0; }

.testimonial__quote {
  font-family: var(--font-display);
  font-size:   var(--type-h2-size);
  font-weight: 600;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.testimonial__cite {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  position: relative;
  z-index: 1;
}
.testimonial__name {
  font-family: var(--font-display);
  font-size:   var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
}
.testimonial__role {
  font-family: var(--font-body);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
  opacity: 0.7;
}

/* ---- molecule: metric (case-study fact) ----------------- */
.metric {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.metric__title {
  font-family: var(--font-display);
  font-size:   var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
}
.metric__body {
  font-family: var(--font-body);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-secondary);
}

/* ---- molecule: project-card ------------------------------ */
.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.project-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-darker);
}
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--motion-slow);
}
.project-card:hover .project-card__media img { transform: scale(1.03); }

.project-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: clamp(var(--s-2), 3vw, var(--s-3)) clamp(var(--s-3), 4vw, var(--s-4)) clamp(var(--s-3), 4vw, var(--s-4));
  background: var(--surface-dark);
  color: var(--text-on-dark);
  isolation: isolate;
  transition: background var(--motion-base);
}
.project-card:hover .project-card__body { background: var(--surface-elevated); }

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}
.project-card__title {
  font-family: var(--font-display);
  font-size:   var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  mix-blend-mode: difference;
}
.project-card__brand {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: var(--s-4);
  mix-blend-mode: difference;
}
.project-card__brand img {
  height: var(--s-3);
  width: auto;
  max-width: var(--s-20);
  object-fit: contain;
  filter: brightness(0) invert(1);
}


/* ============================================================
   ORGANISMS
   ============================================================ */

/* ---- organism: nav --------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--s-10);
  padding-inline: var(--space-page-x);
  background: transparent;      /* blend with whatever surface is below */
  color: var(--c-white);        /* always white — difference blend inverts on light bg */
}

.nav__logo {
  display: inline-flex;
  width: var(--s-5);
  height: var(--s-5);
  mix-blend-mode: difference;  /* auto-inverts on dark and light navs */
}
.nav__logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) invert(1); /* render as white so difference blend works */
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--s-5);
  padding: 0 var(--s-3);
  font-family:    var(--font-display);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  transition: opacity var(--motion-fast);
}
.nav__link { mix-blend-mode: difference; }
.nav__link:hover { opacity: 0.7; }
/* Download CV btn in nav bar also blends */
.nav > .nav__links > .btn { mix-blend-mode: difference; }

/* ---- atom: nav-toggle (mobile burger) -------------------- */
.nav__toggle {
  display: none;
  width: var(--s-5);
  height: var(--s-5);
  padding: var(--s-1);
  flex-direction: column;
  justify-content: center;
  gap: var(--s-h);
  color: inherit;
  mix-blend-mode: difference;
}
.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- organism: menu (dropdown) --------------------------- */
.nav__group { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + var(--s-h));
  left: 0;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border: var(--border-w) solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  z-index: var(--z-dropdown);
}
.menu[hidden] { display: none; }

@media (max-width: 480px) {
  .menu { min-width: calc(100vw - var(--s-4)); left: var(--s-2); }
}

/* ---- nav: mobile layout ---------------------------------
   Below 720px the link row collapses behind .nav__toggle and
   reopens as a full-width panel under the sticky bar.
---------------------------------------------------------- */
@media (max-width: 720px) {
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: var(--s-10) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--space-page-x) var(--s-3);
    background: var(--surface-darker);   /* always solid dark — same on every page */
    color: var(--text-on-dark);
    border-top: var(--border-w) solid var(--border-on-dark);
    max-height: calc(100dvh - var(--s-10));
    overflow-y: auto;
    z-index: var(--z-nav);
  }
  .nav__links[hidden] { display: none; }
  /* Inside the open panel blend mode is irrelevant — reset for clean rendering */
  .nav__links .nav__link,
  .nav__links .nav__toggle,
  .nav__links .btn { mix-blend-mode: normal; }

  /* Flatten .nav__group so its children flow inside .nav__links */
  .nav__group { display: contents; }

  .nav__links > .nav__link,
  .nav__group  > .nav__link {
    width: 100%;
    height: var(--s-6);
    padding-inline: 0;
    justify-content: flex-start;
  }
  .nav__links > .btn {
    width: 100%;
    height: var(--s-6);
    margin-block-start: var(--gap-sm);
    justify-content: center;
  }

  /* Inline the works submenu inside the mobile panel */
  .menu {
    position: static;
    min-width: 0;
    width: 100%;
    border: 0;
    border-block: var(--border-w) solid var(--border-on-dark);
    box-shadow: none;
    background: transparent;
  }
  .menu-item {
    padding: var(--s-2) 0;
    background: transparent;
    color: inherit;
  }
  .menu-item:hover,
  .menu-item:focus-visible {
    background: transparent;
    color: var(--action-hover);
  }
  .nav--dark .menu-item__logo img { filter: brightness(0) invert(1); }
}

/* ---- organism: hero (home) ------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--gap-lg);
  padding-block: clamp(var(--s-5), 8vw, var(--s-10)) clamp(var(--s-4), 6vw, var(--s-8));
  padding-inline: var(--space-page-x);
  max-width: var(--page-max);
  margin-inline: auto;
}
.hero__intro    { display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; }
.hero__greeting { font-family: var(--font-display); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); }
.hero__title {
  font-family:    var(--font-display);
  font-size:      var(--type-display-size);
  font-weight:    var(--type-display-weight);
  line-height:    var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  max-width: 18ch;
  mix-blend-mode: difference;
}
.hero__portrait {
  flex-shrink: 0;
  width: clamp(280px, 28vw, 420px);
}
.hero__portrait img {
  width: 100%; height: auto; display: block;
}
.hero__portrait--empty {
  background: var(--c-gray-900);
  border: var(--border-w-2) dashed var(--border-on-dark);
  position: relative;
}
.hero__portrait--empty::after {
  content: 'portrait';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--border-on-dark);
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-lh) var(--font-display);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero__portrait { width: 100%; max-width: 360px; }
}

/* ---- organism: section-head ------------------------------ */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-md);
  max-width: var(--reading-max);
  margin-inline: auto;
}
.section-head__title {
  font-family:    var(--font-display);
  font-size:      clamp(48px, 12vw, 180px);
  font-weight:    800;
  line-height:    0.85;
  letter-spacing: -1.8px;
}
.section-head__lede {
  font-family: var(--font-body);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
}

/* ---- organism: project-grid ------------------------------ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  width: 100%;
}
@media (max-width: 720px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ---- organism: case-hero --------------------------------- */
.case-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  text-align: center;
  padding-top: clamp(var(--s-4), 6vw, var(--s-8));
  padding-inline: var(--space-page-x);
}
.case-hero__logo {
  height: var(--s-4);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--gap-md);
}
.case-hero__logo img {
  height: var(--s-4);
  width: auto;
  filter: brightness(0) invert(1);
}
.case-hero__title {
  font-family:    var(--font-display);
  font-size:      var(--type-display-size);
  font-weight:    var(--type-display-weight);
  line-height:    var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  max-width: var(--content-max);
}
.case-hero__subtitle {
  font-family: var(--font-body);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-on-dark-muted);
  max-width: var(--reading-max);
}
.case-hero__tags {
  display: flex; flex-wrap: wrap;
  gap: var(--gap-xs);
  justify-content: center;
  padding-bottom: var(--s-6);
}
.case-hero__media {
  width: 100%;
  overflow: hidden;
}
.case-hero__media img {
  width: 100%;
  height: auto;
  max-height: 776px;
  object-fit: cover;
  object-position: center top;
}

/* Light-surface variant of case-hero (warm / white hero bg) */
.case-hero--light .case-hero__logo img { filter: none; }
.case-hero--light .case-hero__subtitle { color: var(--text-secondary); }

/* Illustration variant: SVG decorative art, transparent bg, natural height */
.case-hero__media--illustration img {
  object-fit: fill;
  max-height: none;
  height: auto;
}

/* ---- organism: case-back (breadcrumb on dark surface) ---- */
.case-back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--s-3) var(--space-page-x);
  font-family:    var(--font-display);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  color: var(--text-on-dark);
  opacity: 0.7;
  transition: opacity var(--motion-fast);
}
.case-back:hover { opacity: 1; }

/* ---- organism: case-content (light wrapper) ------------- */
.case-content {
  background: var(--surface-elevated);
  color: var(--text-primary);
  padding-inline: var(--space-page-x);
}
.case-content__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ---- organism: case-block (one section inside content) -- */
.case-block {
  padding-block: var(--gap-xl);
  border-top: var(--border-w) solid var(--border-strong);
}
.case-block:first-child { border-top: 0; }
.case-block__title {
  font-family: var(--font-display);
  font-size:   var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
}
.case-block__lede {
  font-family:    var(--font-body);
  font-size:      var(--type-body-lg-size);
  font-weight:    var(--type-body-lg-weight);
  line-height:    var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-ls);
}

/* Single-column variant: stacked title + lede + actions */
.case-block--prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* Split variant: aside + body */
.case-block--split {
  display: grid;
  grid-template-columns: minmax(0, var(--aside-max)) 1fr;
  gap: var(--gap-md);
  align-items: start;
}
.case-block__aside {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.case-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* Impact variant: aside title + 2×2 metric grid */
.case-block--impact {
  display: grid;
  grid-template-columns: minmax(0, var(--aside-max)) 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap-lg) var(--gap-md);
}
.case-block--impact .case-block__title { grid-column: 1; grid-row: 1; }
.case-block--impact .metric:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.case-block--impact .metric:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.case-block--impact .metric:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.case-block--impact .metric:nth-of-type(4) { grid-column: 3; grid-row: 2; }

/* ---- responsive: case-block layout collapses ------------- */
@media (max-width: 1100px) {
  .case-block--split  { grid-template-columns: minmax(0, 280px) 1fr; }
  .case-block--impact { grid-template-columns: minmax(0, 280px) 1fr 1fr; }
}
@media (max-width: 1024px) {
  .case-block--impact {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .case-block--impact .case-block__title { grid-column: 1 / -1; grid-row: 1; }
  .case-block--impact .metric:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .case-block--impact .metric:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .case-block--impact .metric:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .case-block--impact .metric:nth-of-type(4) { grid-column: 2; grid-row: 3; }
}
@media (max-width: 720px) {
  .case-block--split { grid-template-columns: 1fr; }
  .case-block--impact {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .case-block--impact .case-block__title,
  .case-block--impact .metric { grid-column: 1; grid-row: auto; }
}

/* ---- organism: page-intro -------------------------------
   Page-level header: large display title + offset lede.
   Used by About, Experience.
---------------------------------------------------------- */
.page-intro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap-md);
  row-gap: var(--gap-lg);
}
.page-intro__title {
  grid-column: 1 / -1;
  font-family:    var(--font-display);
  font-size:      clamp(48px, 12vw, 180px);
  font-weight:    800;
  line-height:    0.85;
  letter-spacing: -1.8px;
}
.page-intro__title-emoji {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: 0;
}
.page-intro__lede {
  grid-column: 2 / -1;
  max-width: var(--reading-max);
  font-family:    var(--font-body);
  font-size:      var(--type-body-lg-size);
  font-weight:    var(--type-body-lg-weight);
  line-height:    var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-ls);
}
@media (max-width: 720px) {
  .page-intro__lede { grid-column: 1 / -1; }
}

/* ---- organism: values-grid ------------------------------
   4-column grid where each row of items starts at column 2,
   leaving column 1 empty (matches Figma "values" layout).
   Items are typically .metric molecules.
---------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap-md);
  row-gap: var(--gap-xl);
}
.values-grid > :nth-child(3n + 1) { grid-column-start: 2; }

@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .values-grid > :nth-child(3n + 1) { grid-column-start: auto; }
}
@media (max-width: 720px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* ---- molecule: timeline-row -----------------------------
   Single experience entry inside a .timeline list:
   logo (aside) + role + bullets.
---------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
}
.timeline__row {
  display: grid;
  grid-template-columns: minmax(0, var(--aside-max)) 1fr;
  column-gap: var(--gap-md);
  align-items: start;
  padding-block: var(--gap-xl);
  border-bottom: var(--border-w) solid var(--border-strong);
}
.timeline__row:last-child { border-bottom: 0; }
.timeline__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gap-md);
}
.timeline__logo img {
  max-width: 100%;
  max-height: var(--s-8);
  width: auto;
  object-fit: contain;
}
.timeline__detail {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.timeline__role {
  font-family: var(--font-display);
  font-size:   var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
}
.timeline__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.timeline__bullets p { margin: 0; }
.timeline__bullets strong { font-weight: 700; }

@media (max-width: 720px) {
  .timeline__row {
    grid-template-columns: 1fr;
    row-gap: var(--gap-md);
    padding-block: var(--gap-lg);
  }
  .timeline__logo {
    justify-content: flex-start;
    padding-inline: 0;
  }
  .timeline__logo img { max-height: var(--s-5); }
}

/* ---- organism: spec-list --------------------------------
   Skills / Tools / Education / Languages — labelled rows
   separated by hairlines. Marked up as <dl>.
---------------------------------------------------------- */
.spec-list {
  display: flex;
  flex-direction: column;
}
.spec-list__row {
  display: grid;
  grid-template-columns: minmax(0, var(--aside-max)) 1fr;
  column-gap: var(--gap-md);
  align-items: start;
  padding-block: var(--gap-lg);
  border-top: var(--border-w) solid var(--border-strong);
}
.spec-list__row:last-child { border-bottom: var(--border-w) solid var(--border-strong); }
.spec-list__label {
  font-family:    var(--font-display);
  font-size:      var(--type-h1-size);
  font-weight:    var(--type-h1-weight);
  line-height:    var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
}
.spec-list__body {
  font-family: var(--font-body);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-lh);
}
.spec-list__body p + p { margin-top: var(--gap-xs); }

@media (max-width: 720px) {
  .spec-list__row {
    grid-template-columns: 1fr;
    row-gap: var(--gap-sm);
  }
}

/* ---- organism: contact-list -----------------------------
   Vertical stack of display-sized links (Contacts page).
   Hover turns the link red.
---------------------------------------------------------- */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.contact-list__item {
  display: block;
  font-family:    var(--font-display);
  font-size:      clamp(36px, 9vw, 128px);
  font-weight:    var(--type-display-weight);
  line-height:    var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  color: inherit;
  transition: color var(--motion-fast);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-list__item:hover,
.contact-list__item:focus-visible { color: var(--action-hover); }

/* ---- organism: footer ------------------------------------ */
.footer {
  border-top: var(--border-w) solid var(--border-on-dark);
  padding: var(--s-2) var(--space-page-x);
}
.footer.section--light,
.footer.section--page,
.footer.section--warm,
.footer.section--yellow { border-top-color: var(--border-strong); }

.footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-md);
}
.footer__copy { margin-inline-end: auto; }

.footer__inner > * {
  font-family:    var(--font-display);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
}
.footer a { transition: opacity var(--motion-fast); }
.footer a:hover { opacity: 0.7; }

@media (max-width: 720px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
  }
  .footer__copy { margin-inline-end: 0; }
  .footer__inner > .btn { width: 100%; height: var(--s-6); }
}