/* ============================================================
   Layout — header, home, research, projects, opportunities, footer
   Mirrors the visual language of the Site.jsx design prototype.
   ============================================================ */

.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--s8); }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--s8); }
.container-medium { max-width: 640px; margin: 0 auto; padding: 0 var(--s8); }

/* ---- Header ---- */
.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--fg);
}
.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--s8);
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
}
.nav-toggle {
  display: none;
  justify-self: start;
}
.header-page-title {
  display: none;
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-detail);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acc);
}
.site-nav { display: flex; gap: var(--s6); align-items: center; grid-column: 2; justify-self: center; }
.site-nav a {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-detail);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sub);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--acc);
  font-weight: 700;
  border-bottom-color: var(--acc);
}
.lang-toggle {
  background: none;
  border: 1.5px solid var(--rule);
  cursor: pointer;
  padding: 3px 8px;
  font-family: var(--font-detail);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sub);
  grid-column: 3;
  justify-self: end;
}

/* ---- Section label (geo strip + heading) ---- */
.section-label { margin-bottom: var(--s8); }
.section-label h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg);
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* ---- Home ---- */
.hero { padding: var(--s16) var(--s8); text-align: center; }
.hero__photo {
  margin: 0 auto var(--s8);
  width: 176px;
  height: 176px;
  border: 2px solid var(--fg);
  overflow: hidden;
  flex-shrink: 0;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero__name {
  margin: var(--s3) 0 var(--s4);
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.hero__aka {
  margin: 0 0 var(--s10);
  font-family: var(--font-detail);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--acc);
}
.hero__bio {
  margin: 0 auto var(--s10);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--fg);
  max-width: 52ch;
}
.geo-rule { display: flex; height: 48px; overflow: hidden; }
.geo-rule svg, .geo-rule .geo-rule__solid { flex-shrink: 0; }

.cobogo-row {
  height: 43px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 901 537'%3E%3Cg transform='matrix(1,0,0,1,-3.967923,-5.941511)'%3E%3Cg transform='matrix(0.999971,-0.007557,0.007557,0.999971,-36.305262,-205.403286)'%3E%3Cpath fill='%235A5248' d='M933.036,575.569C934.798,646.821 935.2,733.601 935.034,749.335C605.562,754.71 567.715,749.984 454.176,750.507C339.46,751.036 296.757,749.839 141.949,747.853C113.935,747.494 49.802,743.394 34.7,745.495C35.561,617.521 36.341,495.057 38.464,423.848C41.763,313.193 41.822,256.213 41.851,213.116C76.534,211.038 108.255,214.697 182.288,214.563C395.314,214.178 532.736,220.564 690.458,219.624C698.485,220.717 763.132,217.081 931.162,218.388C931.133,426.357 930.056,455.122 933.036,575.569ZM861.986,567.007C889.67,613.064 873.85,338.272 872.663,291.543C872.295,277.034 719.483,276.243 719.616,291.752C719.937,329.298 816.36,491.101 861.986,567.007ZM624.967,294.488C620.752,289.326 605.388,291.377 595.507,291.047C585.318,290.706 570.872,287.736 563.837,292.442C558.781,295.824 557.773,305.492 555.336,311.648C553.851,317.397 522.258,418.23 520.06,427.035C503.309,494.149 495.693,524.782 477.105,577.423C468.289,602.391 452.852,662.633 458.443,680.279C464.034,697.926 607.377,690.086 613.65,690.304C674.155,692.414 810.861,697.925 827.114,683.309C844.052,668.076 787.09,586.469 756.59,526.025C705.11,424.004 629.102,299.551 624.967,294.488ZM132.345,283.514C132.091,281.571 101.339,279.189 100.175,287.031C95.94,315.546 97.46,440.325 98.515,456.814C99.42,470.955 86.668,628.481 99.413,665.067C107.7,688.856 133.465,680.397 152.987,680.325C172.326,680.255 214.327,683.058 221.833,680.445C232.343,676.787 143.618,369.771 132.345,283.514ZM460.004,292.899C460.905,278.282 364.361,285.821 338.288,285.821C252.872,285.821 212.828,278.029 207.755,285.567C199.413,297.961 220.923,342.349 258.17,495.283C260.198,503.612 306.903,672.676 314.603,675.672C325.642,679.967 361.625,680.566 368.405,677.054C386.026,667.924 405.037,516.995 432.036,408.82C434.123,400.457 459.205,305.848 460.004,292.899Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.home-ctas { background: var(--muted); }
.home-ctas__grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s12) var(--s8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s10);
}
.cta-card {
  text-decoration: none;
  display: block;
  padding: var(--s6);
  border-top: 3px solid var(--fg);
  height: 100%;
}
.cta-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: var(--s3);
  letter-spacing: 0.02em;
}
.cta-card__blurb {
  margin: 0 0 var(--s6);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sub);
}
.cta-card__link {
  font-family: var(--font-detail);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acc);
}

/* ---- Research (/pesquisa) ---- */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s8);
  margin-bottom: var(--s16);
}
.area-card {
  border: 2px solid var(--acc);
  background: var(--bg);
  padding: var(--s6);
}
.area-card__icon { color: var(--acc); margin-bottom: var(--s4); }
.area-card__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--acc);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.area-card__desc {
  margin: 0 0 var(--s6);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
}
.area-card__pubs { display: flex; flex-direction: column; gap: var(--s3); }
.area-card__pub-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-detail);
  font-size: 11px;
  color: var(--fg);
  text-decoration: none;
}
.area-card__pub-link svg { flex-shrink: 0; }
.area-card__pub-link:hover { text-decoration: underline; }

.pub-legend {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
  align-items: center;
  font-family: var(--font-detail);
  font-size: 11px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pub-legend__item { display: flex; align-items: center; gap: 4px; }

.pub-list { border-top: 1px solid var(--rule); }
.pub-row {
  border-bottom: 1px solid var(--rule);
  padding: var(--s5) 0;
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: var(--s5);
  align-items: start;
}
.pub-row__bar { align-self: stretch; min-height: 20px; }
.pub-row__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.pub-row__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  line-height: 1.4;
  flex: 1;
}
.pub-row__badges { display: flex; gap: var(--s2); align-items: center; flex-shrink: 0; padding-top: 2px; }
.pub-row__meta { display: flex; align-items: center; gap: var(--s5); }
.pub-row__authors {
  font-family: var(--font-detail);
  font-size: 11px;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pub-row__pdf {
  font-family: var(--font-detail);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acc);
  text-decoration: none;
  border-bottom: 1px solid var(--acc);
  padding-bottom: 1px;
  flex-shrink: 0;
}
.pub-row__side { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; flex-shrink: 0; }
.pub-row__year { font-family: var(--font-detail); font-size: 11px; color: var(--sub); }
.pub-list__load-more { display: flex; justify-content: center; margin-top: var(--s8); }

/* ---- Projects (/projetos) ---- */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); }
.project-card { text-decoration: none; display: block; height: 100%; }
.project-card .card { padding: 0; height: 100%; display: flex; flex-direction: column; }
.project-card__bar { height: 4px; }
.project-card__body { padding: var(--s6); flex: 1; display: flex; flex-direction: column; }
.project-card__meta { display: flex; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; align-items: center; }
.project-card__dates { font-family: var(--font-detail); font-size: 11px; color: var(--sub); }
.project-card__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg);
  line-height: 1.3;
}
.project-card__desc { margin: 0; font-family: var(--font-ui); font-weight: 300; font-size: 13px; line-height: 1.7; color: var(--sub); }

.img-placeholder {
  border-bottom: 1px solid var(--rule);
}
.cobogo-pattern {
  background-color: var(--muted);
  background-repeat: repeat;
  background-size: auto 43px;
}
.cobogo-pattern--research {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 901 537'%3E%3Cg transform='matrix(1,0,0,1,-3.967923,-5.941511)'%3E%3Cg transform='matrix(0.999971,-0.007557,0.007557,0.999971,-36.305262,-205.403286)'%3E%3Cpath fill='%2327538F' d='M933.036,575.569C934.798,646.821 935.2,733.601 935.034,749.335C605.562,754.71 567.715,749.984 454.176,750.507C339.46,751.036 296.757,749.839 141.949,747.853C113.935,747.494 49.802,743.394 34.7,745.495C35.561,617.521 36.341,495.057 38.464,423.848C41.763,313.193 41.822,256.213 41.851,213.116C76.534,211.038 108.255,214.697 182.288,214.563C395.314,214.178 532.736,220.564 690.458,219.624C698.485,220.717 763.132,217.081 931.162,218.388C931.133,426.357 930.056,455.122 933.036,575.569ZM861.986,567.007C889.67,613.064 873.85,338.272 872.663,291.543C872.295,277.034 719.483,276.243 719.616,291.752C719.937,329.298 816.36,491.101 861.986,567.007ZM624.967,294.488C620.752,289.326 605.388,291.377 595.507,291.047C585.318,290.706 570.872,287.736 563.837,292.442C558.781,295.824 557.773,305.492 555.336,311.648C553.851,317.397 522.258,418.23 520.06,427.035C503.309,494.149 495.693,524.782 477.105,577.423C468.289,602.391 452.852,662.633 458.443,680.279C464.034,697.926 607.377,690.086 613.65,690.304C674.155,692.414 810.861,697.925 827.114,683.309C844.052,668.076 787.09,586.469 756.59,526.025C705.11,424.004 629.102,299.551 624.967,294.488ZM132.345,283.514C132.091,281.571 101.339,279.189 100.175,287.031C95.94,315.546 97.46,440.325 98.515,456.814C99.42,470.955 86.668,628.481 99.413,665.067C107.7,688.856 133.465,680.397 152.987,680.325C172.326,680.255 214.327,683.058 221.833,680.445C232.343,676.787 143.618,369.771 132.345,283.514ZM460.004,292.899C460.905,278.282 364.361,285.821 338.288,285.821C252.872,285.821 212.828,278.029 207.755,285.567C199.413,297.961 220.923,342.349 258.17,495.283C260.198,503.612 306.903,672.676 314.603,675.672C325.642,679.967 361.625,680.566 368.405,677.054C386.026,667.924 405.037,516.995 432.036,408.82C434.123,400.457 459.205,305.848 460.004,292.899Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cobogo-pattern--teaching {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 901 537'%3E%3Cg transform='matrix(1,0,0,1,-3.967923,-5.941511)'%3E%3Cg transform='matrix(0.999971,-0.007557,0.007557,0.999971,-36.305262,-205.403286)'%3E%3Cpath fill='%23E41010' d='M933.036,575.569C934.798,646.821 935.2,733.601 935.034,749.335C605.562,754.71 567.715,749.984 454.176,750.507C339.46,751.036 296.757,749.839 141.949,747.853C113.935,747.494 49.802,743.394 34.7,745.495C35.561,617.521 36.341,495.057 38.464,423.848C41.763,313.193 41.822,256.213 41.851,213.116C76.534,211.038 108.255,214.697 182.288,214.563C395.314,214.178 532.736,220.564 690.458,219.624C698.485,220.717 763.132,217.081 931.162,218.388C931.133,426.357 930.056,455.122 933.036,575.569ZM861.986,567.007C889.67,613.064 873.85,338.272 872.663,291.543C872.295,277.034 719.483,276.243 719.616,291.752C719.937,329.298 816.36,491.101 861.986,567.007ZM624.967,294.488C620.752,289.326 605.388,291.377 595.507,291.047C585.318,290.706 570.872,287.736 563.837,292.442C558.781,295.824 557.773,305.492 555.336,311.648C553.851,317.397 522.258,418.23 520.06,427.035C503.309,494.149 495.693,524.782 477.105,577.423C468.289,602.391 452.852,662.633 458.443,680.279C464.034,697.926 607.377,690.086 613.65,690.304C674.155,692.414 810.861,697.925 827.114,683.309C844.052,668.076 787.09,586.469 756.59,526.025C705.11,424.004 629.102,299.551 624.967,294.488ZM132.345,283.514C132.091,281.571 101.339,279.189 100.175,287.031C95.94,315.546 97.46,440.325 98.515,456.814C99.42,470.955 86.668,628.481 99.413,665.067C107.7,688.856 133.465,680.397 152.987,680.325C172.326,680.255 214.327,683.058 221.833,680.445C232.343,676.787 143.618,369.771 132.345,283.514ZM460.004,292.899C460.905,278.282 364.361,285.821 338.288,285.821C252.872,285.821 212.828,278.029 207.755,285.567C199.413,297.961 220.923,342.349 258.17,495.283C260.198,503.612 306.903,672.676 314.603,675.672C325.642,679.967 361.625,680.566 368.405,677.054C386.026,667.924 405.037,516.995 432.036,408.82C434.123,400.457 459.205,305.848 460.004,292.899Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cobogo-pattern--extension {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 901 537'%3E%3Cg transform='matrix(1,0,0,1,-3.967923,-5.941511)'%3E%3Cg transform='matrix(0.999971,-0.007557,0.007557,0.999971,-36.305262,-205.403286)'%3E%3Cpath fill='%2325652B' d='M933.036,575.569C934.798,646.821 935.2,733.601 935.034,749.335C605.562,754.71 567.715,749.984 454.176,750.507C339.46,751.036 296.757,749.839 141.949,747.853C113.935,747.494 49.802,743.394 34.7,745.495C35.561,617.521 36.341,495.057 38.464,423.848C41.763,313.193 41.822,256.213 41.851,213.116C76.534,211.038 108.255,214.697 182.288,214.563C395.314,214.178 532.736,220.564 690.458,219.624C698.485,220.717 763.132,217.081 931.162,218.388C931.133,426.357 930.056,455.122 933.036,575.569ZM861.986,567.007C889.67,613.064 873.85,338.272 872.663,291.543C872.295,277.034 719.483,276.243 719.616,291.752C719.937,329.298 816.36,491.101 861.986,567.007ZM624.967,294.488C620.752,289.326 605.388,291.377 595.507,291.047C585.318,290.706 570.872,287.736 563.837,292.442C558.781,295.824 557.773,305.492 555.336,311.648C553.851,317.397 522.258,418.23 520.06,427.035C503.309,494.149 495.693,524.782 477.105,577.423C468.289,602.391 452.852,662.633 458.443,680.279C464.034,697.926 607.377,690.086 613.65,690.304C674.155,692.414 810.861,697.925 827.114,683.309C844.052,668.076 787.09,586.469 756.59,526.025C705.11,424.004 629.102,299.551 624.967,294.488ZM132.345,283.514C132.091,281.571 101.339,279.189 100.175,287.031C95.94,315.546 97.46,440.325 98.515,456.814C99.42,470.955 86.668,628.481 99.413,665.067C107.7,688.856 133.465,680.397 152.987,680.325C172.326,680.255 214.327,683.058 221.833,680.445C232.343,676.787 143.618,369.771 132.345,283.514ZM460.004,292.899C460.905,278.282 364.361,285.821 338.288,285.821C252.872,285.821 212.828,278.029 207.755,285.567C199.413,297.961 220.923,342.349 258.17,495.283C260.198,503.612 306.903,672.676 314.603,675.672C325.642,679.967 361.625,680.566 368.405,677.054C386.026,667.924 405.037,516.995 432.036,408.82C434.123,400.457 459.205,305.848 460.004,292.899Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.project-detail__teaser {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--rule);
}

/* ---- Project detail ---- */
.project-detail__bar { height: 6px; }
.project-detail__back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-detail);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sub);
  margin-bottom: var(--s8);
  text-decoration: none;
  display: inline-block;
}
.project-detail__title {
  margin: 0 0 var(--s8);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.project-detail__desc { margin: 0 0 var(--s12); font-family: var(--font-ui); font-weight: 300; font-size: 17px; line-height: 1.8; color: var(--fg); }

.project-detail__recognition {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s12);
  padding: var(--s3) var(--s5);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}

.project-detail__section { margin-bottom: var(--s12); }
.project-detail__text { margin: 0; font-family: var(--font-ui); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--fg); }

.project-detail__contributions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s5); counter-reset: contribution; }
.project-detail__contribution {
  margin: 0 0 0 calc(var(--s8) + var(--s2));
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg);
  position: relative;
}
.project-detail__contribution::before {
  counter-increment: contribution;
  content: counter(contribution);
  position: absolute;
  left: calc(-1 * (var(--s8) + var(--s2)));
  top: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--acc);
}

.project-detail__grid { display: grid; gap: var(--s12); }
.project-detail__grid--split { grid-template-columns: 1fr 1fr; }
.project-detail__heading {
  margin: 0 0 var(--s5);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.project-detail__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.project-detail__partner { font-family: var(--font-ui); font-weight: 300; font-size: 14px; color: var(--sub); display: flex; align-items: center; gap: var(--s3); }
.project-detail__partner-dot { width: 6px; height: 6px; flex-shrink: 0; }
.project-detail__output-link { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc); padding-bottom: 1px; }

.project-detail__collab {
  margin-top: var(--s12);
  padding: var(--s8);
  border: 2px solid var(--acc);
}
.project-detail__collab .project-detail__heading { color: var(--acc); }
.project-detail__collab .project-detail__text:not(:first-child) { margin-top: var(--s3); }
.project-detail__collab-link {
  display: inline-block;
  margin-top: var(--s5);
  font-family: var(--font-detail);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acc);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-detail__collab-link:hover { border-bottom-color: var(--acc); }

.related-projects { padding-top: var(--s10) !important; }
.related-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.related-project-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: var(--shadow-trans);
}
.related-project-card:hover { box-shadow: var(--shadow-2); transform: var(--shadow-lift-2); }
.related-project-card__bar { display: block; height: 4px; }
.related-project-card__title {
  margin: 0;
  padding: var(--s5);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg);
}

/* ---- Opportunities ---- */
.vacancies-box { border: 2px solid var(--rule); padding: var(--s8); }
.vacancies-box p { margin: 0 0 var(--s2); font-family: var(--font-ui); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--sub); }
.vacancies-box p:last-child { margin-bottom: 0; }

.levels-list { border-top: 1px solid var(--rule); }
.levels-row { border-bottom: 1px solid var(--rule); padding: var(--s6) 0; display: grid; grid-template-columns: 200px 1fr; gap: var(--s8); }
.levels-row__label { font-family: var(--font-display); font-weight: 900; font-size: 15px; text-transform: uppercase; color: var(--acc); letter-spacing: 0.02em; padding-top: 3px; }
.levels-row__text { margin: 0; font-family: var(--font-ui); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--fg); }

.how-list { display: flex; flex-direction: column; gap: var(--s8); }
.how-item { display: grid; grid-template-columns: 4px 1fr; gap: var(--s6); }
.how-item__bar { background: var(--cobalt); }
.how-item__title { margin: 0 0 var(--s3); font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--acc); }
.how-item__text { margin: 0; font-family: var(--font-ui); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--fg); }

/* ---- Footer ---- */
.site-footer { background: var(--fg); color: var(--bg); }
.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s10) var(--s8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4);
}
.site-footer__mark { font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer__org { font-family: var(--font-detail); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.6; }
.site-footer__email { font-family: var(--font-detail); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; }

/* ---- Responsive ---- */
@media (max-width: 48rem) {
  .home-ctas__grid { grid-template-columns: minmax(0, 1fr); }
  .areas-grid { grid-template-columns: minmax(0, 1fr); }
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
  .project-detail__grid--split { grid-template-columns: minmax(0, 1fr); }
  .related-projects__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__name { font-size: 40px; }
  .section-label h2 { font-size: 22px; }
  .levels-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .cta-card,
  .area-card,
  .project-card,
  .project-detail__grid--split > div,
  .levels-row__label,
  .levels-row__text { min-width: 0; }

  /* ---- Mobile nav ---- */
  .header-page-title { display: block; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 11;
  }
  .nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--fg);
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) 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(-7px) rotate(-45deg); }

  .site-nav {
    display: none;
    position: fixed;
    grid-column: auto;
    justify-self: auto;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    padding: var(--s2) var(--s8) var(--s4);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    width: 100%;
    padding: var(--s4) 0;
    font-size: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a:last-child { border-bottom: none; }

  /* ---- Mobile publications ---- */
  .pub-row {
    grid-template-columns: 4px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .pub-row > * { min-width: 0; }
  .pub-row__bar { grid-row: 1 / 3; }
  .pub-row__head { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .pub-row__badges { flex-wrap: wrap; }
  .pub-row__badges .tag { white-space: normal; overflow-wrap: break-word; flex: 1 1 160px; min-width: 0; text-align: left; }
  .pub-row__badges .tag > span { min-width: 0; overflow-wrap: break-word; }
  .pub-row__meta { flex-wrap: wrap; row-gap: var(--s2); }
  .pub-row__side {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--s3);
  }
}