/* ==========================================================================
   kevintumen.fr — site personnel
   Palette : encre marine + accent sarcelle (rappel du CV), unités en REM.
   ========================================================================== */

:root {
  --bg: #f7f9fa;
  --surface: #ffffff;
  --ink: #182433;
  --ink-soft: #4a5a6a;
  --accent: #177e74;
  --accent-soft: #d9efec;
  --line: #e2e8ec;
  --radius: 0.75rem;
  --shadow: 0 0.125rem 0.75rem rgba(24, 36, 51, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1720;
    --surface: #16202c;
    --ink: #e8eef2;
    --ink-soft: #9fb0bd;
    --accent: #58bfb2;
    --accent-soft: #12332f;
    --line: #24313f;
    --shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

:focus-visible {
  outline: 0.1875rem solid var(--accent);
  outline-offset: 0.2rem;
  border-radius: 0.25rem;
}

html { scroll-behavior: smooth; }

/* Les ancres (#contact, #parcours…) ne doivent pas se cacher sous la topbar sticky. */
main [id] { scroll-margin-top: 4.5rem; }

/* Lien d'evitement clavier : invisible jusqu'au focus. */
.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: 20;
  padding: 0.5rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; }

a { color: var(--accent); }

/* ===== Barre de navigation ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(0.5rem);
  border-bottom: 0.0625rem solid var(--line);
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.brand span { color: var(--accent); }

.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.topbar nav a:hover { color: var(--accent); }
.nav-cta {
  padding: 0.35rem 0.9rem;
  border: 0.0625rem solid var(--accent);
  border-radius: 2rem;
  color: var(--accent) !important;
}

.lang-switch { font-size: 0.85rem; color: var(--ink-soft); }
.lang-switch a { text-decoration: none; color: var(--ink-soft); }
.lang-switch a:hover { color: var(--accent); }
.lang-current { font-weight: 700; color: var(--accent); }

/* ===== Hero ===== */
.hero {
  padding: 5rem 1.5rem 4rem;
  background:
    radial-gradient(60rem 30rem at 80% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}

.hero-inner { max-width: 46rem; margin: 0 auto; }

.hero-grid {
  max-width: 62rem;
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 3rem;
  align-items: center;
}

/* Les <picture> (WebP + fallback) ne doivent pas creer de boite : display
   contents laisse l'img se comporter comme enfant direct (grille du hero,
   cadres de capture, lightbox). Le <source> doit etre masque explicitement :
   les navigateurs le calculent en display block, et via display contents il
   deviendrait une boite fantome (vecu : photo du hero ejectee en rangee 2). */
.hero-grid picture, .shot-frame picture, .lightbox picture { display: contents; }
picture source { display: none; }

.hero-photo {
  width: 100%;
  height: auto;
  max-width: 18rem;
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.5rem rgba(24, 36, 51, 0.18);
  border: 0.25rem solid var(--surface);
  justify-self: end;
}

/* Badge disponibilite (masque sur mobile : le bouton Contact suffit) */
.hero-avail { margin: 0 0 1.25rem; font-size: 0.85rem; }
.hero-avail a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.95rem;
  border: 0.0625rem solid var(--line);
  border-radius: 2rem;
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hero-avail a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
.hero-avail a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 48rem) { .hero-avail { display: none; } }

.hero-kicker {
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}

.hero h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.4rem); }

.hero-lede { max-width: 38rem; font-size: 1.125rem; color: var(--ink-soft); }

.hero-actions { display: flex; gap: 0.75rem; margin: 1.75rem 0 2.5rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-0.125rem); box-shadow: var(--shadow); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { border: 0.0625rem solid var(--line); color: var(--ink); background: var(--surface); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  max-width: 34rem;
}
.hero-stats dt { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; color: var(--accent); }
.hero-stats dd { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ===== Sections ===== */
.section { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.5rem; }
.section-wide { max-width: 62rem; }
.section h2 {
  font-size: clamp(1.9rem, 1.6rem + 0.6vw, 2.1rem);
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.1875rem solid var(--accent);
  display: inline-block;
}

.section-alt {
  max-width: none;
  background: var(--surface);
  border-top: 0.0625rem solid var(--line);
  border-bottom: 0.0625rem solid var(--line);
}
/* Classe doublée : gagne en spécificité sur les margin des règles à classe
   unique (.edu, .convictions, .section h2), sinon les enfants restent à gauche. */
.section-alt.section-alt > * { max-width: 43rem; margin-left: auto; margin-right: auto; }
.section-alt h2 { display: table; }

/* ===== Timeline parcours ===== */
.timeline { list-style: none; margin: 0; padding: 0; }

/* > obligatoire : sans lui, les <li> des puces imbriquées deviennent
   eux-mêmes des grilles 2 colonnes (gras et liens éjectés à droite). */
.timeline > li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  padding: 0 0 2.25rem 0;
  position: relative;
}

.tl-when { color: var(--accent); font-weight: 600; font-size: 0.9rem; padding-top: 0.2rem; }

/* La ligne est un pseudo-element (et non une bordure) : elle demarre SOUS
   le point, comme le connecteur des roles — le point ne la chevauche pas. */
.tl-body { padding-left: 1.5rem; position: relative; }
.tl-body::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 0;
  width: 0.125rem;
  background: var(--line);
}
/* Point plein, centre sur la ligne (la ligne passe derriere, en continu).
   Pas d'anneau : avec box-sizing border-box il rongeait le point (6px
   visibles) et laissait un moignon de ligne au-dessus. */
.tl-body::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0.3rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
}

.tl-body h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }

/* Roles successifs chez un meme employeur (promotion) —
   connecteur point · ligne · point, facon LinkedIn. */
.tl-roles { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.tl-roles > li { position: relative; padding-left: 1.6rem; padding-bottom: 1.75rem; }
.tl-roles > li:last-child { padding-bottom: 0; }
.tl-roles > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-soft);
}
.tl-roles > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 1.3rem;
  bottom: 0.35rem;
  width: 0.125rem;
  background: var(--line);
}
.tl-roles h4 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
}
.tl-role-when {
  display: block;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.2rem;
}

/* Clients des missions de conseil */
.tl-missions { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.tl-ref {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}
.tl-ref::before { content: "★ "; color: var(--accent); font-style: normal; }
.tl-org { display: block; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); margin-top: 0.2rem; }
.tl-body ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.tl-body li { margin-bottom: 0.35rem; }

/* ===== Compétences ===== */
.skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.skill-card {
  background: var(--bg);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.skill-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--accent); }
.skill-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* ===== Formation ===== */
.edu { list-style: none; margin: 0; padding: 0; }
.edu li { padding: 0.9rem 0; border-bottom: 0.0625rem solid var(--line); }
.edu li:last-child { border-bottom: none; }
.edu-year {
  display: inline-block;
  min-width: 8rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
/* Retrait suspendu annees | contenu : un intitule long qui se replie reste
   aligne sous le contenu, il ne revient plus se balader sous les annees
   ("multi-sites", "LBO"). Pas de grid ici : les noeuds de texte du <li>
   deviendraient des items de grille et partiraient sur leur propre rangee. */
@media (min-width: 48rem) {
  .edu li { padding-left: 10.25rem; }
  .edu-year { float: left; width: 9rem; margin-left: -10.25rem; }
}

/* ===== Contact ===== */
.section-contact { text-align: center; }
.section-contact h2 { display: inline-block; }
.contact-lede { color: var(--ink-soft); max-width: 32rem; margin: 0 auto 2rem; }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 18rem));
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.contact-card:hover { transform: translateY(-0.2rem); border-color: var(--accent); }
.contact-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}
.contact-value { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; color: var(--ink); overflow-wrap: anywhere; }
.contact-hint { font-size: 0.85rem; color: var(--ink-soft); }
.contact-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  flex-wrap: wrap;
}
.meta-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.meta-item svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

@media (max-width: 48rem) {
  .contact-cards { grid-template-columns: minmax(0, 22rem); }
}

/* ===== Pages intérieures ===== */
.topbar nav a.active { color: var(--accent); font-weight: 600; }

.page-hero {
  padding: 4rem 1.5rem 3rem;
  background:
    radial-gradient(60rem 30rem at 80% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.page-hero .hero-inner { max-width: 46rem; }
/* La premiere section colle un peu plus au hero : moins de vide a l'arrivee. */
.page-hero + .section { padding-top: 2rem; }
.page-hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); }
.page-thesis {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.page-hero .hero-lede { margin: 0; }

/* Impacts chiffrés dans la timeline */
.tl-impact {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--accent-soft);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink);
  list-style: none;
}
.tl-impact li { margin: 0.2rem 0; padding-left: 1.2rem; position: relative; }
.tl-impact li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Cartes projets */
.projects { display: grid; gap: 1.5rem; }
.project-card {
  background: var(--surface);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow);
}
.project-card h3 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.project-meta { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin: 0 0 0.75rem; }
.project-card p { color: var(--ink-soft); margin: 0.5rem 0; }
/* Cadre de capture : ratio fixe pour une grille homogène, et fond clair fixe
   (les captures sont en thème clair — on les isole du dark mode du site). */
.shot-frame {
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: #eef2f5;
  padding: 0.4rem;
  margin: 0.75rem 0 0.25rem;
  cursor: zoom-in;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.shot-frame:hover { border-color: var(--accent); transform: translateY(-0.125rem); }
.project-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0.3rem;
  display: block;
}

/* Lightbox 100 % CSS (via :target, sans JavaScript) — clic n'importe où pour fermer. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 20, 28, 0.92);
  padding: 2rem;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}
.lightbox:target { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.4rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}
/* Croix de fermeture : purement indicative (tout clic ferme deja). */
.lightbox::after {
  content: "\2715";
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

.project-stack {
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: 0.0625rem solid var(--line);
  margin-top: 1rem;
  padding-top: 0.75rem;
}

/* Convictions (page IA & Finance) */
.convictions { counter-reset: conviction; list-style: none; margin: 0; padding: 0; }
.convictions > li {
  counter-increment: conviction;
  margin-bottom: 2rem;
  padding-left: 3.5rem;
  position: relative;
}
.convictions > li::before {
  content: counter(conviction, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  color: var(--accent);
}
.convictions h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.convictions p { margin: 0; color: var(--ink-soft); }

/* Bandeau cap / aspiration */
.cap-band {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 3rem 1.5rem;
}
.cap-band h2 { margin: 0 0 0.5rem; font-size: 1.6rem; border: none; padding: 0; }
.cap-band p { max-width: 38rem; margin: 0 auto 1.25rem; opacity: 0.92; }
.cap-band .btn { background: #fff; color: var(--accent); }

/* Teasers accueil */
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.teaser {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.teaser:hover { transform: translateY(-0.2rem); }
.teaser h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ink); }
.teaser p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.teaser .more { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--accent); font-weight: 600; }

@media (max-width: 48rem) {
  .teaser-grid { grid-template-columns: 1fr; }
}

/* ===== Grand ecran (>= 64rem) : occuper l'espace horizontal =====
   Les conteneurs s'elargissent, mais la prose reste a une mesure lisible
   (~46rem) : c'est la mise en page qui s'etale, pas les lignes de texte. */
@media (min-width: 64rem) {
  .section, .section-wide { max-width: 66rem; padding-left: 2rem; padding-right: 2rem; }
  .section > p:not([class]) { max-width: 46rem; }
  .section-alt.section-alt > * { max-width: 66rem; }
  .section-alt.section-alt > p:not([class]) { max-width: 46rem; }

  /* Hero accueil aligne sur le contenu des sections (66rem - 2rem de padding
     de chaque cote = 62rem utiles). Colonne texte = 38rem = la largeur du
     lede : le texte remplit sa colonne, plus de vide avant la photo. */
  .hero { padding-left: 2rem; padding-right: 2rem; }
  .hero-grid { max-width: 62rem; grid-template-columns: 1fr 21rem; }
  .hero-photo { max-width: 21rem; }

  /* Hero pages interieures : meme geometrie que les sections */
  .page-hero { padding-left: 2rem; padding-right: 2rem; }
  .page-hero .hero-inner { max-width: 62rem; }
  .page-hero h1 { max-width: 52rem; }
  .page-hero .page-thesis { max-width: 48rem; }

  /* Cartes : les grilles utilisent la largeur gagnee */
  .skills { grid-template-columns: repeat(4, 1fr); }
  .convictions { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 3.5rem; }
  .convictions > li { margin-bottom: 0; }

  /* Timeline : colonne dates plus genereuse, corps a mesure lisible */
  .timeline > li { grid-template-columns: 11rem 1fr; }
  .tl-body { max-width: 48rem; }
}

/* Projets en 2x2 seulement au-dela de 72rem : entre 64 et 72rem les cartes
   seraient trop etroites (~470px), une colonne large lit mieux. */
@media (min-width: 72rem) {
  .projects { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  /* Les captures des deux cartes d'une meme rangee restent face a face :
     la zone titre est calee sur deux lignes, meme quand le titre n'en
     occupe qu'une — sans ca, un titre replie decale toute la carte. */
  .project-card h3 { min-height: 2.4em; }
}

/* ===== Animations au defilement (CSS pur, sans JavaScript) =====
   animation-timeline: view() est pilote par le scroll : chaque element joue
   son fondu-remontee pendant qu'il entre dans le viewport (reversible en
   remontant). Pas de fill : une fois entre, l'animation relache les styles,
   les transform de survol (cartes) reprennent la main. Navigateurs sans
   support (via @supports) : aucun effet, contenu affiche normalement. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section h2,
    .teaser,
    .skill-card,
    .project-card,
    .timeline > li,
    .convictions > li,
    .edu li,
    .contact-card,
    .cap-band h2,
    .cap-band p,
    .cap-band .btn {
      animation: rise-in linear;
      animation-timeline: view();
      /* 35 % de la hauteur de l'element : assez court pour que les grandes
         cartes (mobile) redeviennent opaques des le premier tiers visible. */
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

/* ===== Pied de page ===== */
.footer {
  text-align: center;
  padding: 2rem 1.5rem;
  border-top: 0.0625rem solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 48rem) {
  /* Topbar en deux rangées : marque centrée (langue à droite), liens en dessous
     sur une seule ligne — évite les libellés cassés sur 2-3 lignes. */
  .topbar { position: relative; flex-wrap: wrap; justify-content: center; row-gap: 0.35rem; padding: 0.65rem 1rem; }
  .topbar .brand { width: 100%; text-align: center; }
  .topbar nav { width: 100%; justify-content: center; gap: 0.8rem; font-size: 0.9rem; }
  .topbar nav a { white-space: nowrap; }
  .topbar .lang-switch { position: absolute; top: 0.8rem; right: 1rem; white-space: nowrap; }
  main [id] { scroll-margin-top: 6.5rem; }  /* topbar deux rangees */
  .hero { padding: 3.5rem 1.25rem 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-photo { justify-self: center; max-width: 14rem; order: -1; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .timeline > li { grid-template-columns: 1fr; gap: 0.4rem; }
  .tl-when { padding-top: 0; }
  .skills { grid-template-columns: 1fr; }
}