/* ============================================================
   CV — Kpatinde Lemaye Godson
   Grille bento, thème clair / sombre pilotable par [data-theme]
   ============================================================ */

/* ---------- 1. Jetons ------------------------------------- */

:root {
  --canvas:      #EFECE4;
  --surface:     #FFFFFF;
  --surface-2:   #F6F4EF;
  --surface-3:   #E9E5DC;

  --ink:         #11152B;
  --ink-2:       #3D4359;
  --muted:       #6C7189;

  --line:        #E3DFD4;
  --line-2:      #D4CEC0;

  --accent:      #1B2E7A;
  --accent-soft: rgba(27, 46, 122, .07);
  --accent-line: rgba(27, 46, 122, .28);

  --live:        #0C7A52;
  --live-soft:   rgba(12, 122, 82, .10);

  --shadow:      0 1px 2px rgba(17, 21, 43, .04), 0 10px 26px -16px rgba(17, 21, 43, .22);
  --shadow-up:   0 2px 4px rgba(17, 21, 43, .05), 0 18px 40px -20px rgba(17, 21, 43, .30);

  --knob:        #FFFFFF;

  --gap: 12px;
  --radius: 18px;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

[data-theme="dark"] {
  --canvas:      #090B12;
  --surface:     #12151F;
  --surface-2:   #181C28;
  --surface-3:   #1F2433;

  --ink:         #EDEFF6;
  --ink-2:       #C0C7D8;
  --muted:       #8B94AC;

  --line:        #232839;
  --line-2:      #2F3547;

  --accent:      #93A6FF;
  --accent-soft: rgba(147, 166, 255, .10);
  --accent-line: rgba(147, 166, 255, .32);

  --live:        #34D399;
  --live-soft:   rgba(52, 211, 153, .12);

  --shadow:      0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -18px rgba(0, 0, 0, .8);
  --shadow-up:   0 2px 6px rgba(0, 0, 0, .5), 0 22px 46px -22px rgba(0, 0, 0, .9);

  --knob:        #3B4459;
}

/* ---------- 2. Socle -------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

h1, h2 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* `display` posé par l'auteur bat le display:none que le navigateur
   applique à [hidden]. Sans ça, masquer un élément en grille ne marche pas. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand { fill: currentColor; stroke: none; }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ---------- 3. Barre haute -------------------------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.topbar__id { display: flex; align-items: center; gap: 10px; min-width: 0; }

.topbar__mark {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--accent);
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--accent-soft);
}

.topbar__sep { width: 1px; height: 16px; background: var(--line-2); }

.topbar__text {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: 8px; }

@media (min-width: 720px) {
  .topbar__actions { gap: 10px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .35s ease;
}

/* Libellés courts tant que la barre n'a pas la place de tout afficher :
   quatre commandes en toutes lettres empilent le bandeau sur trois rangées.
   `--compact` va jusqu'à ne garder que l'icône, d'où son aria-label. */
.btn__full { display: none; }
.btn--compact { padding: 7px 9px; }

@media (min-width: 720px) {
  .btn__full { display: inline; }
  .btn__short { display: none; }
  .btn--compact { padding: 7px 14px; }
}
.btn .ico { font-size: 13px; stroke-width: 1.9; }
.btn:hover { color: var(--accent); border-color: var(--accent-line); }

.btn--primary {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Interrupteur clair / sombre */

.switch {
  position: relative;
  width: 58px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color .35s ease, border-color .35s ease;
}

.switch__face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--muted);
  transition: color .3s ease;
}

.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .34s cubic-bezier(.4, .9, .25, 1), background-color .35s ease;
}

[data-theme="light"] .switch__face--sun  { color: var(--accent); }
[data-theme="dark"]  .switch__face--moon { color: var(--accent); }
[data-theme="dark"]  .switch__knob { transform: translateX(30px); }

/* ---------- 4. Grille bento ------------------------------- */

.sheet {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: background-color .35s ease, border-color .35s ease, transform .25s ease, box-shadow .25s ease;
}

.card.card--flush { padding: 0; overflow: hidden; }

@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.note {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--muted);
}

.meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- 5. Portrait + profil -------------------------- */

.portrait {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  object-position: 50% 22%;
}

.name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 116;
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.15rem);
  line-height: .94;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.role {
  margin-top: 9px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.bio {
  margin-top: 13px;
  max-width: 62ch;
  font-size: .94rem;
  color: var(--ink-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
.chip .ico { font-size: 14px; color: var(--muted); }

.chip--live { color: var(--live); background: var(--live-soft); border-color: transparent; font-weight: 600; }

.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2.6s ease-out infinite;
}

/* ---------- 6. Stack technique ---------------------------- */

.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.tech {
  --brand: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px 13px 5px 5px;
}

.tech__tile {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.tech__tile .brand { width: 18px; height: 18px; }

/* Couleurs de marque officielles. Deux valeurs quand la teinte d'origine
   ne tient pas le contraste sur l'un des deux fonds. */
.tech[data-tech="react"]      { --brand: #149ECA; }
.tech[data-tech="nodedotjs"]  { --brand: #5FA04E; }
.tech[data-tech="express"]    { --brand: var(--ink); }
.tech[data-tech="php"]        { --brand: #6E72AB; }
.tech[data-tech="laravel"]    { --brand: #F0341F; }
.tech[data-tech="javascript"] { --brand: #B59500; }
.tech[data-tech="html5"]      { --brand: #E34F26; }
.tech[data-tech="css3"]       { --brand: #1572B6; }
.tech[data-tech="mysql"]      { --brand: #00618A; }
.tech[data-tech="mongodb"]    { --brand: #47A248; }
.tech[data-tech="git"]        { --brand: #F05032; }

[data-theme="dark"] .tech[data-tech="react"]      { --brand: #61DAFB; }
[data-theme="dark"] .tech[data-tech="nodedotjs"]  { --brand: #7BC96F; }
[data-theme="dark"] .tech[data-tech="php"]        { --brand: #9CA0DA; }
[data-theme="dark"] .tech[data-tech="javascript"] { --brand: #F7DF1E; }
[data-theme="dark"] .tech[data-tech="css3"]       { --brand: #3C9BE0; }
[data-theme="dark"] .tech[data-tech="mysql"]      { --brand: #55B3D9; }
[data-theme="dark"] .tech[data-tech="mongodb"]    { --brand: #5FCB63; }

/* Le dauphin MySQL est un tracé en contour : il pèse moins que les
   marques pleines, on le monte d'un cran pour retrouver la même masse. */
.tech[data-tech="mysql"] .brand { width: 21px; height: 21px; }

/* ---------- 7. Entrées (expérience, projets) -------------- */

.entry { margin-top: 15px; }

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.entry__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -.015em;
}

.entry__role {
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
}

.facts { margin-top: 11px; display: grid; gap: 6px; }

.facts li {
  position: relative;
  padding-left: 16px;
  font-size: .855rem;
  color: var(--ink-2);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--accent-line);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--live-soft);
  color: var(--live);
  transition: background-color .2s ease;
}
.live__url { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; }
.live .ico { font-size: 13px; stroke-width: 2; opacity: .7; transition: transform .2s ease; }
.live:hover .ico { transform: translate(2px, -2px); opacity: 1; }

.projects { margin-top: 4px; }

.project { padding: 15px 0; border-top: 1px solid var(--line); }
.project:first-child { border-top: 0; padding-top: 11px; }
.project:last-child { padding-bottom: 0; }

/* ---------- 8. Compétences, loisirs ----------------------- */

.skills { margin-top: 15px; display: grid; gap: 9px; }

.skill {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .865rem;
  color: var(--ink-2);
}
.skill .ico { font-size: 17px; color: var(--accent); }

.hobbies { margin-top: 15px; display: grid; gap: 9px; }

.hobby {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .865rem;
  color: var(--ink-2);
}
.hobby .ico { font-size: 17px; color: var(--accent); }

/* ---------- 9. Parcours : une frise, un pivot ------------- */

.path { margin-top: 16px; }

.path__seg {
  position: relative;
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 11px;
}
.path__seg .ico { font-size: 13px; }
.path__seg::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.3em;
  bottom: 0;
  width: 1.5px;
  background: var(--accent-line);
}

.step { position: relative; padding-left: 24px; padding-bottom: 13px; }

.step::before {
  content: "";
  position: absolute;
  left: 2.5px;
  top: .42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
}
.step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.42em + 11px);
  bottom: 0;
  width: 1.5px;
  background: var(--line-2);
  opacity: .7;
}

.step--on::before { border-color: var(--accent); background: var(--accent); }
.step--on::after  { background: var(--accent-line); opacity: 1; }

.step__title { font-size: .855rem; font-weight: 600; color: var(--ink); margin-top: 1px; }

.path > li:last-child { padding-bottom: 0; }
.path > li:last-child::after { display: none; }

.pivot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0 15px;
  padding: 9px 12px;
  border: 1px dashed var(--accent-line);
  border-radius: 12px;
  background: var(--accent-soft);
}

.pivot__year {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
}

.pivot__text { font-size: .775rem; font-weight: 600; color: var(--ink-2); }

/* ---------- 10. Langues ----------------------------------- */

.langs { margin-top: 16px; display: grid; gap: 14px; max-width: 340px; }

.lang {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
}

.lang__name { font-size: .9rem; font-weight: 600; }
.lang__level { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); }

.gauge { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 4px; }

.gauge__u {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--surface-3);
}
.gauge__u--on { background: var(--accent); }

/* ---------- 11. Code source ------------------------------- */

.card--action { display: block; }

.gh__note { margin-top: 13px; font-size: .82rem; color: var(--ink-2); }

.gh { display: flex; align-items: center; gap: 11px; margin-top: 14px; }

.gh__mark { width: 22px; height: 22px; flex: none; color: var(--ink); }

.gh__handle {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh__go { font-size: 15px; stroke-width: 2; margin-left: auto; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.card--action:hover .gh__go { transform: translate(2px, -2px); color: var(--accent); }

/* ---------- 12. Contact ----------------------------------- */

.contacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }

.contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 15px;
  transition: border-color .2s ease, color .2s ease;
}
.contact .ico { font-size: 15px; color: var(--accent); }

a.contact:hover { color: var(--ink); border-color: var(--accent-line); }

/* ---------- 12 bis. Le CV affiché en entier (cv.html) ----- */

.paper { display: grid; justify-items: center; gap: 12px; }

.paper__sheet {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.paper__sheet img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* La feuille tient dans la fenêtre : on voit le CV d'un seul coup
     d'œil, sans cadre à faire défiler. Sur mobile, c'est la largeur qui
     commande et la page défile normalement. */
  max-height: calc(100vh - 170px);
}

@media (hover: hover) {
  .paper__sheet:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
}

.paper__hint {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--muted);
}

.state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 7px;
  padding: 44px 22px;
}

.state__ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  margin-bottom: 4px;
}

.state__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106;
  font-weight: 700;
  font-size: 1.02rem;
}

.state__text { font-size: .865rem; color: var(--ink-2); max-width: 46ch; }

.state__path {
  display: block;
  margin: 9px auto 2px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  padding: 5px 10px;
}

.state--missing {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---------- 13. Pied -------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 20px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--muted);
}

/* ---------- 14. Paliers ----------------------------------- */

@media (min-width: 680px) {
  .page  { padding: 22px 20px 48px; }
  .sheet { grid-template-columns: repeat(6, 1fr); --gap: 13px; }

  .c-photo    { grid-column: span 2; }
  .c-profil   { grid-column: span 4; }
  .c-stack    { grid-column: span 6; }
  .c-exp      { grid-column: span 6; }
  .c-skills   { grid-column: span 6; }
  .c-projects { grid-column: span 6; }
  .c-path     { grid-column: span 6; }
  .c-lang     { grid-column: span 3; }
  .c-hobby    { grid-column: span 3; }
  .c-github   { grid-column: span 6; }
  .c-contact  { grid-column: span 6; }
}

@media (min-width: 1040px) {
  .page  { padding: 26px 24px 56px; }
  .sheet { grid-template-columns: repeat(12, 1fr); --gap: 14px; }
  .card  { padding: 22px; }

  .c-photo    { grid-column: span 3; }
  .c-profil   { grid-column: span 9; }
  .c-stack    { grid-column: span 12; }
  .c-exp      { grid-column: span 7; }
  .c-skills   { grid-column: span 5; }
  .c-projects { grid-column: span 8; }
  .c-path     { grid-column: span 4; }
  .c-lang     { grid-column: span 4; }
  .c-hobby    { grid-column: span 3; }
  .c-github   { grid-column: span 5; }
  .c-contact  { grid-column: span 12; }
}

/* ---------- 15. Mouvement --------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.card, .topbar {
  animation: rise .55s cubic-bezier(.22, .68, .28, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  @media (hover: hover) { .card:hover { transform: none; } }
}

/* ---------- 16. Impression -------------------------------- */

@media print {
  /* On imprime le thème affiché à l'écran, sans conversion : le sombre
     sort sombre. Il faut que les fonds soient réellement encrés, d'où
     print-color-adjust, et une page sans marge pour que la couleur aille
     jusqu'au bord au lieu de flotter sur un liseré blanc. */
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { margin: 0; }

  body { font-size: 10.5px; }
  .page { max-width: none; padding: 9mm; }
  .card { break-inside: avoid; animation: none; box-shadow: none; padding: 13px; }

  /* Projets et Parcours dépassent la hauteur d'une page : les garder
     insécables les repousserait en bloc et creuserait un vide. On les
     laisse se couper, mais jamais au milieu d'un projet ou d'une étape. */
  .c-projects, .c-path { break-inside: auto; }
  .entry, .project, .step, .pivot, .path__seg { break-inside: avoid; }
  .topbar, .foot { animation: none; }
  .topbar__actions, .foot__made { display: none; }

  /* cv.html à l'impression : la feuille occupe la page, sans habillage. */
  .paper__hint, .state--missing { display: none; }
  .paper__sheet { box-shadow: none; border-radius: 0; }
  .paper__sheet img { max-height: none; width: 100%; }
  .dot { animation: none; }
  .name { font-size: 2rem; }
  .portrait { min-height: 0; }

  /* La largeur de page n'est pas celle de l'écran : on impose la grille
     large pour tenir en deux feuilles au lieu de cinq. */
  .sheet { grid-template-columns: repeat(12, 1fr); gap: 8px; }

  .c-photo    { grid-column: span 3; }
  .c-profil   { grid-column: span 9; }
  .c-stack    { grid-column: span 12; }
  .c-exp      { grid-column: span 7; }
  .c-skills   { grid-column: span 5; }
  .c-projects { grid-column: span 8; }
  .c-path     { grid-column: span 4; }
  .c-lang     { grid-column: span 4; }
  .c-hobby    { grid-column: span 3; }
  .c-github   { grid-column: span 5; }
  .c-contact  { grid-column: span 12; }
}