* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-color: var(--line) var(--canvas);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/var(--body-leading) var(--sans);
}
[hidden] {
  display: none !important;
}
/* Selecao em azul, a cor de "links, foco e selecao" do design system. Em menta ela sumia sobre os
   campos menta; o azul se destaca no menta, no branco e no tema escuro. */
::selection {
  background: var(--blue);
  color: var(--surface);
}
a {
  color: var(--blue);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 5px;
}
:target {
  scroll-margin-top: var(--header-offset);
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.15;
  text-wrap: balance;
}
h1,
h2 {
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin-bottom: 24px;
}
h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
p {
  margin-bottom: 20px;
}
.icon {
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
}
.mono {
  font: 400 12px/1.6 var(--mono);
}
.muted {
  color: var(--muted);
}
.shell {
  max-width: var(--page-width);
  padding: 0 48px 100px;
  margin: auto;
}
.skip {
  position: absolute;
  left: 20px;
  top: -100px;
  padding: 12px;
  background: var(--surface);
  z-index: 10;
}
.skip:focus {
  top: 12px;
}
/* Cabecalho no desktop: a tela, com o nome no logotipo pixelado no lugar do texto. No mobile a
   tela sai e entra o mark reduzido, com o nome de volta em texto, que ali ocupa menos largura. */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
  padding: 64px 0 48px;
}
.hero h1 {
  font: 700 var(--display-size)/var(--display-leading) var(--sans);
  margin: 0;
  letter-spacing: -0.035em;
}
.hero h1 span {
  font: 400 0.92em/1.18 var(--mono);
}
.hero-copy > p:first-child {
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.hero-copy p.muted {
  font-size: 16px;
}
/* Links em sequencia: a seta de um encostava no rotulo do seguinte. Margem a direita, e nao a
   esquerda, para o link que quebra de linha no celular nao comecar recuado. */
.connections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.connections > a {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  font-size: 23px;
}
.connections > a > .icon:first-child {
  color: var(--blue);
}
.connections > a > .icon:last-child {
  margin-left: auto;
  width: 16px;
}
.connections small {
  display: block;
  margin-top: 4px;
  font: 11px/1.6 var(--mono);
  color: var(--muted);
}
.section {
  margin-top: 104px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 24px;
}
.section-heading p {
  max-width: 48ch;
  color: var(--muted);
}
.work-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 44px;
  gap: 28px;
  border-top: 1px solid var(--hairline);
  padding: 32px 0;
  align-items: start;
}
.work-period {
  padding-top: 7px;
  color: var(--muted);
}
.work-row h3 a {
  color: var(--ink);
  text-decoration: none;
}
.work-row p {
  max-width: 64ch;
  color: var(--muted);
  margin-bottom: 14px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  font: 11px/1.5 var(--mono);
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--subtle);
  color: var(--muted);
}
.row-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
}
.research-section {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 70px;
  align-items: start;
}
.section-intro {
  max-width: 55ch;
  font-size: var(--body-size);
}
.publication-preview {
  padding: 32px;
  background: var(--blue-soft);
  border-radius: var(--radius-card);
}
.publication-preview h3 {
  font-size: 29px;
  line-height: 1.2;
}
.publication-preview h3 a {
  color: var(--ink);
  text-decoration: none;
}
.publication-preview .mono,
.publication-preview .authors {
  color: var(--blue);
}
.publication-preview .authors {
  font-size: 13px;
}
.publication-preview .tags {
  margin: 24px 0 16px;
}
.publication-preview .tags li {
  background: var(--surface);
  color: var(--blue);
}
.translated-title {
  font-size: 15px;
}
.field-note {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.field-note > .icon {
  color: var(--green);
  margin-bottom: 16px;
}
.field-note > p {
  font: 18px/1.6 var(--mono);
}
.field-note summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--blue);
  cursor: pointer;
}
.field-note details p {
  margin-top: 16px;
}
.about-section {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 100px;
}
.teaching-preview {
  margin-top: 48px;
}
.teaching-preview > .icon {
  margin-bottom: 20px;
  color: var(--blue);
}
.teaching-preview h3 {
  font-size: 28px;
}
.education {
  padding: 28px 32px;
  background: var(--subtle);
  border-radius: var(--radius-card);
  align-self: start;
}
.education ol {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.education li {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.education li:last-child {
  padding-bottom: 0;
}
.education h4 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.education li p {
  font: 12px/1.6 var(--mono);
  color: var(--muted);
  margin: 0;
}
footer {
  background: var(--mint);
  padding: 56px max(48px, calc((100% - 1264px) / 2));
}
.contact-inner {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 48px;
}
.contact-inner h2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.contact-inner p {
  max-width: 48ch;
  margin-bottom: 0;
}
.contact-inner .button {
  flex-shrink: 0;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--green);
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
}
.footer-bottom p {
  margin: 0;
  flex: 1;
}
.footer-bottom a {
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.reading-header {
  max-width: 1000px;
  margin: 48px 0 64px;
}
.reading-header h1 {
  font-size: clamp(34px, 4.5vw, 58px);
  margin-bottom: 24px;
}
.reading-header .lead {
  font-size: 21px;
  line-height: 1.55;
  max-width: 60ch;
}
.article-header h1 {
  font-size: clamp(30px, 3.8vw, 50px);
}
.reading-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  gap: 64px;
}
.reading-layout aside {
  font-size: 14px;
}
.aside-title {
  font-size: 18px;
  letter-spacing: 0;
}
.reading-layout aside .tags {
  margin-top: 24px;
}
.prose {
  font-size: 18px;
}
.prose h2 {
  font-size: 28px;
  margin-top: 48px;
  margin-bottom: 18px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p,
.prose li {
  max-width: 70ch;
}
.prose ul {
  padding-left: 24px;
}
.prose li {
  margin-bottom: 14px;
}
.prose .text-link {
  margin-right: 30px;
}
.prose details {
  margin: 32px 0;
  padding: 16px 0;
  border-block: 1px solid var(--hairline);
}
.prose summary {
  cursor: pointer;
  min-height: 44px;
}
.prose details p {
  margin-top: 18px;
}
.prose .button {
  margin: 16px 0 24px;
}
.editorial-note {
  font-size: 14px;
  color: var(--muted);
}
.doi {
  overflow-wrap: anywhere;
}
.research-index {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
}
.research-question {
  align-self: center;
}
.research-question > p {
  font: 24px/1.5 var(--mono);
}
.teaching-icon > .icon {
  color: var(--green);
  margin-bottom: 24px;
}
.error-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
  .row-arrow:hover {
    background: var(--blue);
    color: var(--surface);
  }
}
@media (max-width: 1100px) {
  .shell {
    padding-inline: 32px;
  }
  .hero {
    gap: 32px;
  }
  .hero-copy > p:first-child {
    font-size: 20px;
  }
  .research-section,
  .about-section {
    gap: 40px;
  }
  .connections {
    gap: 22px;
  }
  .connections > a {
    gap: 10px;
    font-size: 20px;
  }
  .connections small {
    font-size: 10px;
  }
}
@media (max-width: 800px) {
  /* Troca pedida por Gabriel: no mobile, o mark reduzido entra no lugar da tela. */
  /* Menos nas paginas sem sumario, que sao a home e o contato: ali a barra do cabecalho nao
     divide espaco com o sumario sticky, entao cabe o logotipo por extenso com a tela, como no
     desktop. A condicao e a ausencia do sumario, e nao uma lista de paginas, para nao desencontrar
     quando uma pagina nova entrar. Sem suporte a :has(), o bloco inteiro e ignorado e fica o mark
     reduzido, que e o caso seguro. */
  body:not(:has(.page-toc)) .wordmark-screen,
  body:not(:has(.page-toc)) .wordmark-type {
    display: inline-flex;
  }
  body:not(:has(.page-toc)) .wordmark-mono,
  body:not(:has(.page-toc)) .wordmark-text {
    display: none;
  }
  .shell {
    padding: 0 24px 64px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
  .hero h1 {
    font-size: clamp(36px, 7vw, 52px);
  }
  .hero-copy {
    max-width: 65ch;
  }
  .hero-copy > p:first-child {
    font-size: 20px;
  }
  /* Altura para um vao visivel entre os nos e a tela, onde as linhas dobram. Com 320 px os nos
     encostavam na tela e as ligacoes sumiam atras dela. */
  .connections {
    gap: 16px;
  }
  .connections > a {
    align-items: start;
    flex-wrap: wrap;
    font-size: 18px;
  }
  .connections > a > .icon:last-child {
    display: none;
  }
  .connections small {
    font: 12px/1.5 var(--sans);
  }
  .section {
    margin-top: 64px;
  }
  .section-heading,
  .research-section,
  .about-section,
  .research-index,
  .reading-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .section-heading {
    margin-bottom: 12px;
  }
  .section-heading h2 {
    margin-bottom: 0;
  }
  .work-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
  }
  .work-period {
    grid-column: 1/-1;
  }
  .work-row h3 {
    font-size: 23px;
  }
  .publication-preview {
    padding: 24px;
  }
  .publication-preview h3 {
    font-size: 26px;
  }
  .research-section {
    gap: 36px;
  }
  .about-section {
    gap: 36px;
  }
  footer {
    padding: 36px 24px 20px;
  }
  .contact-inner,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-bottom {
    gap: 10px;
  }
  .contact-inner .button {
    align-self: flex-start;
  }
  .reading-header {
    margin: 32px 0 40px;
  }
  .reading-header .lead {
    font-size: 18px;
  }
  .reading-layout {
    gap: 36px;
  }
  .reading-layout aside {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hairline);
  }
  .prose {
    font-size: 17px;
  }
  .research-question {
    margin-top: 24px;
  }
}
@media (max-width: 480px) {
  .shell {
    padding-inline: 20px;
  }
  .connections {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .connections > a {
    flex-wrap: nowrap;
    align-items: center;
    padding: 12px 0;
  }
  .connections > a > .icon:last-child {
    display: block;
  }
  .connections small {
    font-size: 12px;
  }
  .hero h1 {
    font-size: 36px;
  }
  .publication-preview {
    padding: 22px;
  }
  .publication-preview h3 {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Composição fotográfica: o retrato abre a leitura; o instrumento integra a pesquisa. */
img {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body {
  caret-color: var(--blue);
}
.shell {
  max-width: 1440px;
}
.portrait-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 64px;
  padding-top: 48px;
}
.portrait-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 20px 32px;
}
.portrait-intro h1 {
  font-size: var(--display-home);
  line-height: 0.99;
  letter-spacing: -0.04em;
  margin-bottom: 36px;
}
.portrait-intro h1 span {
  font: 400 0.84em/1.2 var(--mono);
  letter-spacing: -0.04em;
  color: var(--blue);
}
.personal-intro {
  max-width: 37ch;
  font-size: 21px;
  line-height: 1.45;
}
.personal-intro p:last-child {
  color: var(--muted);
  font-size: 17px;
  max-width: 40ch;
}
.personal-intro strong {
  font-weight: 600;
}
.portrait {
  position: relative;
}
.portrait-window {
  height: 592px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--subtle);
}
.portrait-window img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 33%;
}
.portrait-caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--mint-ink);
  background: var(--mint);
  font: 14px/1.5 var(--mono);
}
.portrait figcaption {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 10px;
}
.round-link {
  color: var(--ink);
  display: inline-flex;
  gap: 30px;
  align-items: center;
  min-height: 52px;
  text-decoration: none;
  margin-top: 6px;
}
.round-link .icon {
  box-sizing: content-box;
  padding: 16px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--action-ink);
  transition: transform var(--duration) var(--ease);
}
.hero-paths {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 48px;
  padding: 38px 0;
  margin-top: 22px;
  border-bottom: 1px solid var(--hairline);
}
.hero-paths > p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--muted);
}
.hero-paths nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.hero-paths nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 24px;
  display: inline-flex;
  gap: 24px;
  align-items: center;
  min-height: 48px;
}
.hero-paths a .icon {
  color: var(--green);
}
.practice-section {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 80px;
}
.practice-intro > p {
  max-width: 31ch;
  color: var(--muted);
}
.practice-intro .mono {
  margin-top: 32px;
  color: var(--green);
}
.practice-section .work-row {
  grid-template-columns: 1fr 44px;
  gap: 8px 24px;
  padding-block: 28px;
}
.practice-section .work-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.practice-section .work-period {
  grid-column: 1;
}
.practice-section .work-row > div:nth-child(2) {
  grid-column: 1;
}
.practice-section .row-arrow {
  grid-column: 2;
  grid-row: 2;
}
.practice-section .work-row h3 {
  font-size: 27px;
}
.practice-section .tags li {
  background: transparent;
  padding: 0;
  color: var(--green);
}
.practice-section .tags li + li::before {
  content: "/";
  margin-right: 8px;
}
.research-feature {
  background: var(--invert-surface);
  color: var(--invert-ink);
  border-radius: 16px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.research-story h2 {
  font-size: clamp(36px, 4.3vw, 64px);
}
.research-story h2 span {
  color: var(--mint);
}
.research-story > p {
  max-width: 44ch;
  color: #d0d0d0;
}
.research-feature .text-link {
  color: var(--mint);
}
.research-feature :focus-visible {
  outline-color: var(--mint);
}
.structure-photo {
  margin-top: 40px;
}
.structure-photo img {
  width: 100%;
  aspect-ratio: 1.7;
  object-fit: cover;
}
.structure-photo figcaption {
  font: 11px/1.6 var(--mono);
  color: #d0d0d0;
  padding-top: 12px;
}
.research-publication {
  align-self: center;
}
.research-feature .publication-preview {
  padding: 0;
  border-radius: 0;
  background: none;
}
.research-feature .publication-preview h3 {
  font-size: clamp(25px, 2.4vw, 36px);
}
.research-feature .publication-preview h3 a {
  color: white;
}
.research-feature .publication-preview .mono,
.research-feature .publication-preview .authors {
  color: var(--mint);
}
.research-feature .publication-preview .tags li {
  background: #363636;
  color: white;
}
.research-footnote {
  color: #d0d0d0;
  font: 12px/1.7 var(--mono);
  border-top: 1px solid #606060;
  padding-top: 24px;
  margin-top: 32px;
}
.mono-heading {
  font-family: var(--mono);
  font-size: calc(1em * var(--display-home-accent));
  font-weight: 400;
  letter-spacing: -0.035em;
}
.network-section .section-heading {
  align-items: end;
}
.network-section .section-heading p {
  justify-self: end;
  max-width: 42ch;
}
.teaching-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  border-block: 1px solid var(--hairline);
  padding-block: 48px;
  align-items: center;
}
.teaching-band > div:first-child {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.teaching-band .icon {
  color: var(--green);
}
.teaching-band h2 {
  margin: 0;
}
.teaching-band p {
  max-width: 48ch;
  font-size: 20px;
}
.photo-essay .section-heading {
  align-items: end;
  margin-bottom: 32px;
}
.photo-essay .section-heading .mono {
  color: var(--green);
  margin-bottom: 0;
}
.photo-frames figure + figure {
  margin-top: 32px;
}
.photo-browser[data-enhanced] .photo-frames figure {
  margin: 0;
}
.photo-frames img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.9;
  object-fit: cover;
  border-radius: 12px;
}
.photo-frames figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}
.photo-frames figcaption .mono {
  color: var(--muted);
}
.photo-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.photo-controls button {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  padding: 12px 20px;
  display: flex;
  gap: 16px;
  border-radius: 999px;
  min-height: 48px;
}
.photo-controls button[aria-pressed="true"] {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.about-section .education {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.about-now {
  max-width: 48ch;
  color: var(--muted);
}
.contact-inner h2 {
  font-size: clamp(40px, 5vw, 72px);
  max-width: 10ch;
}
@media (hover: hover) and (pointer: fine) {
  .round-link:hover .icon {
    transform: translate(3px, -3px);
  }
  .hero-paths a:hover {
    color: var(--blue);
  }
  .photo-controls button:hover {
    border-color: var(--ink);
  }
}
@media (max-width: 1100px) {
  .portrait-hero {
    gap: 0 36px;
  }
  .portrait-window {
    height: 540px;
  }
  .personal-intro {
    font-size: 19px;
  }
  .hero-paths {
    grid-template-columns: 1fr 3fr;
  }
  .hero-paths nav a {
    font-size: 20px;
    gap: 12px;
  }
  .practice-section {
    gap: 48px;
  }
  .research-feature {
    padding: 32px;
    gap: 32px;
  }
}
@media (max-width: 800px) {
  .portrait-hero {
    grid-template-columns: 1fr 1fr;
    padding-top: 28px;
    gap: 0 24px;
  }
  .portrait-intro h1 {
    font-size: clamp(2.4rem, 5.6vw, 3.5rem);
    margin-bottom: 24px;
  }
  .personal-intro {
    font-size: 17px;
  }
  .personal-intro p:last-child {
    font-size: 15px;
  }
  .portrait-window {
    height: 430px;
  }
  .portrait-caption {
    left: 12px;
    bottom: 12px;
    font-size: 12px;
  }
  .portrait figcaption {
    font-size: 10px;
  }
  .round-link {
    font-size: 14px;
    gap: 12px;
  }
  .round-link .icon {
    padding: 12px;
  }
  .hero-paths {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 24px;
  }
  .hero-paths > p br {
    display: none;
  }
  .hero-paths nav a {
    font-size: 18px;
  }
  .practice-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .practice-intro > p {
    max-width: 48ch;
  }
  .practice-intro .mono {
    margin-top: 20px;
  }
  .research-feature {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 40px;
  }
  .structure-photo img {
    aspect-ratio: 2;
  }
  .research-footnote {
    margin-bottom: 0;
  }
  .teaching-band {
    gap: 32px;
  }
  .teaching-band > div:first-child {
    flex-direction: column;
    gap: 24px;
  }
  .teaching-band p {
    font-size: 17px;
  }
}
@media (max-width: 540px) {
  .shell {
    padding-inline: 20px;
    padding-bottom: 64px;
  }
  .portrait-hero {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }
  .portrait-intro {
    padding-bottom: 28px;
  }
  .portrait-intro h1 {
    font-size: clamp(2.6rem, 11.8vw, 4rem);
    line-height: 1.02;
    margin-bottom: 24px;
  }
  .portrait-intro h1 br:first-child {
    display: none;
  }
  .portrait-intro h1 br:first-child::after {
    content: " ";
  }
  .personal-intro {
    max-width: 40ch;
    font-size: 18px;
  }
  .personal-intro p:last-child {
    font-size: 16px;
  }
  .portrait-window {
    height: 360px;
  }
  .portrait-caption {
    left: 20px;
    bottom: 20px;
    font-size: 13px;
  }
  .portrait figcaption {
    text-align: left;
    font-size: 11px;
  }
  .hero-paths {
    margin-top: 12px;
  }
  .hero-paths nav {
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .hero-paths nav a {
    font-size: 17px;
    gap: 12px;
  }
  .hero-paths nav a .icon {
    width: 18px;
    height: 18px;
  }
  .section {
    margin-top: 64px;
  }
  .practice-section .work-row h3 {
    font-size: 23px;
  }
  .research-feature {
    padding: 26px 22px;
    margin-inline: -4px;
  }
  .research-story h2 {
    font-size: 36px;
  }
  .structure-photo {
    margin-top: 24px;
  }
  .research-feature .publication-preview h3 {
    font-size: 27px;
  }
  .network-section .section-heading {
    gap: 12px;
  }
  .network-section .section-heading p {
    justify-self: start;
  }
  .teaching-band {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 32px;
  }
  .teaching-band > div:first-child {
    flex-direction: row;
    gap: 20px;
  }
  .teaching-band > div:first-child > .icon {
    width: 32px;
    height: 32px;
  }
  .photo-frames img {
    aspect-ratio: 1.2;
  }
  .photo-frames figcaption {
    flex-direction: column;
    gap: 4px;
  }
  .photo-controls {
    gap: 8px;
  }
  .photo-controls button {
    font-size: 13px;
    gap: 10px;
    padding: 10px 14px;
  }
  .photo-essay .section-heading {
    gap: 8px;
  }
  .contact-inner h2 {
    font-size: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .round-link .icon {
    transition: none;
  }
}
.portrait-intro {
  min-width: 0;
}
.portrait-intro h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.structure-photo img {
  height: auto;
}

/* v04: overlay de entrada, hero recomposto e variacao de densidade entre as secoes. */

/* Cortina de entrada. O conteudo permanece completo por tras dela e sem JavaScript. */
.entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 24px;
  background: var(--invert-surface);
  animation: entry-in var(--duration-enter) var(--ease);
}
html.entry-open,
html.entry-open body {
  overflow: hidden;
}
.entry-stage {
  margin: auto;
  width: min(900px, 100%);
  color: var(--invert-ink);
}
.entry-stage h2 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 44px;
}
.entry-stage h2 span {
  font: 400 0.84em/1.2 var(--mono);
  letter-spacing: -0.04em;
  color: var(--mint);
}
.entry-diagram {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
}
.entry-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  font: 12px/1.4 var(--mono);
  color: var(--mint);
}
.entry-net {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 320;
  overflow: visible;
}
.entry-net path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.entry-net path:nth-last-of-type(-n + 2) {
  stroke: var(--mint);
}
.entry-net circle {
  fill: var(--mint);
  transform-box: fill-box;
  transform-origin: center;
}
.entry-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.entry-close,
.entry-replay {
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
}
.entry-close {
  border: 0;
  background: var(--mint);
  color: var(--mint-ink);
}
.entry-replay {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mint);
}
.entry-overlay :focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}
/* O dialogo recebe foco so para ser anunciado; o contorno fica nos controles reais. */
.entry-overlay .entry-stage:focus,
.entry-overlay .entry-stage:focus-visible {
  outline: none;
}
@keyframes entry-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hero: uma regra no topo, duas colunas de mesma altura e um indice numerado no pe. */
.portrait-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0 72px;
  align-items: stretch;
  padding-top: 32px;
}
.hero-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 44px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.portrait-intro {
  justify-content: space-between;
  padding-block: 0 8px;
}
.portrait-intro h1 {
  font-size: clamp(3.5rem, 6.8vw, 6.25rem);
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px 40px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.relations-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.portrait-window {
  height: clamp(520px, 44vw, 640px);
}
.hero-paths {
  display: block;
  grid-column: 1 / -1;
  margin-top: 80px;
  padding: 0;
  border-bottom: 0;
  border-top: 1px solid var(--ink);
}
.hero-paths > p {
  padding: 18px 0 36px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-paths ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.hero-paths li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.hero-paths li > span {
  color: var(--green);
}
.hero-paths li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
}
.hero-paths li p {
  max-width: 30ch;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* Densidade: faixas estreitas para leitura, faixas largas para os momentos visuais. */
.band-narrow {
  max-width: 1040px;
  margin-inline: auto;
  margin-top: 112px;
}
.band-wide {
  margin-top: 144px;
}
.network-section .section-heading,
.photo-essay .section-heading {
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.practice-section {
  grid-template-columns: 0.72fr 1.6fr;
  gap: 64px;
}
.practice-section .work-list {
  counter-reset: work;
}
.practice-section .work-row {
  counter-increment: work;
}
.practice-section .work-period::before {
  content: counter(work, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font: 500 34px/1 var(--sans);
  color: var(--hairline);
}

/* Instrumento: o bloco menta chapado vira uma barra escura com acentos da paleta. */

/* Ensaio fotografico: as fotos crescem e os controles viram abas finas sobre uma regra. */
.photo-frames img {
  aspect-ratio: 2.1;
  border-radius: var(--radius-card);
}
.photo-controls {
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
}
.photo-controls button {
  flex: 1 1 0;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 18px 8px 0 0;
  border: 0;
  border-top: 2px solid transparent;
  border-radius: 0;
  margin-top: -1px;
  color: var(--muted);
  text-align: left;
}
.photo-controls button[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  border-top-color: var(--ink);
}
.photo-controls button .mono {
  color: var(--green);
}

@media (hover: hover) and (pointer: fine) {
  .hero-paths li a:hover {
    color: var(--blue);
  }
  .relations-link:hover {
    color: var(--ink);
  }
}
@media (max-width: 1100px) {
  .portrait-hero {
    gap: 0 40px;
  }
  .hero-paths ol {
    gap: 28px;
  }
  .hero-paths li a {
    font-size: 22px;
  }
}
@media (max-width: 800px) {
  .portrait-hero {
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .hero-eyebrow {
    margin-bottom: 28px;
    padding-bottom: 18px;
    font-size: 10px;
  }
  .portrait-window {
    height: 430px;
  }
  .hero-actions {
    margin-top: 28px;
    gap: 12px 24px;
  }
  .hero-paths {
    margin-top: 48px;
  }
  .hero-paths ol {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-paths li {
    padding-block: 18px;
  }
  .hero-paths li a {
    font-size: 20px;
  }
  .practice-section {
    grid-template-columns: 1fr;
  }
  .practice-section .work-period::before {
    font-size: 26px;
  }
  .band-narrow {
    margin-top: 80px;
  }
  .band-wide {
    margin-top: 96px;
  }
  .entry-diagram {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Sem espaco para a coluna lateral, os rotulos viram legenda marcada da rede. */
  .entry-tiers {
    grid-template-rows: none;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
  }
  .entry-tiers li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--mint);
    vertical-align: middle;
  }
  .entry-stage h2 {
    margin-bottom: 28px;
  }
  .photo-controls button {
    padding-top: 14px;
    font-size: 13px;
    gap: 10px;
  }
}
@media (max-width: 540px) {
  .portrait-hero {
    grid-template-columns: 1fr;
    padding-top: 16px;
  }
  .portrait-window {
    height: 360px;
  }
  .hero-paths {
    margin-top: 36px;
  }
  .band-narrow,
  .band-wide {
    margin-top: 64px;
  }
  .entry-overlay {
    padding: 28px 20px;
  }
  .photo-frames img {
    aspect-ratio: 1.2;
  }
  .photo-controls {
    display: grid;
    grid-template-columns: 1fr;
  }
  .photo-controls button {
    border-top: 1px solid var(--hairline);
    margin-top: 0;
    padding: 14px 0;
    min-height: 48px;
  }
  .photo-controls button[aria-pressed="true"] {
    border-top-color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-overlay {
    animation: none;
  }
}

/* Spec 0010. Linguagem herdada das referencias: linhas finas e margens amplas (Co-Star),
   contexto a esquerda com evidencia a direita (Derolez), indice lateral e metadados mono
   (WeekSync), escala e ritmo no lugar de arredondamento (Aspen). Sem caixa, sem pilula,
   sem cor decorativa: azul e verde seguem funcionais. */

/* Indice numerado: a secao se anuncia na coluna da esquerda, o conteudo respira na direita. */
.page-section {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 64px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.page-section:first-of-type {
  margin-top: 64px;
}
.page-section-head {
  align-self: start;
}
.page-section-head .page-index {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.page-section-head h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page-section-head .note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 26ch;
}
.page-section-body > .text-link {
  margin-top: 36px;
}
.page-section-body > .section-intro {
  color: var(--muted);
  margin-bottom: 32px;
}
/* Quebra de densidade: os cases ocupam a largura inteira, com o titulo acima. */
.page-section-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.page-section-wide .page-section-head {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 64px;
  align-items: baseline;
}
.page-section-wide .page-section-head h2 {
  font-size: clamp(28px, 3.4vw, 44px);
}
.page-section-wide .page-section-head .note {
  max-width: 48ch;
  font-size: 15px;
  font-family: var(--sans);
  margin-top: 0;
}

/* Selecao da home: indice editorial com escala variavel, nao quatro cartoes iguais. */
.selected-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  counter-reset: selected;
}
.selected-item {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 44px;
  gap: 64px;
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
}
.selected-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.selected-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.selected-index {
  color: var(--muted);
}
.selected-kind {
  color: var(--ink);
  letter-spacing: 0.04em;
}
.selected-item h3 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 12px;
}
/* O primeiro item carrega mais peso; o ritmo vem da escala, nao de uma moldura. */
.selected-item:first-child h3 {
  font-size: clamp(34px, 3.6vw, 46px);
}
.selected-item h3 a {
  color: var(--ink);
  text-decoration: none;
}
.selected-item h3 a:hover {
  color: var(--blue);
}
.selected-item p {
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}
.selected-item .row-arrow {
  align-self: center;
}

/* Trajetoria e listas: divisoria fina, sem fundo nem raio. */
.education-list,
.now-list,
.method-list,
.project-list,
.publication-list,
.cv-list,
.plain-list,
.writing-list,
.conference-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.education-list li,
.now-list li,
.project-list li,
.publication-list li,
.writing-list li,
.conference-list li,
.method-list li,
.cv-list li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
/* Tags ficam de fora: a primeira perdia o respiro de cima e desalinhava da fileira. */
.page-section-body > ol > li:first-child,
.page-section-body > ul:not(.tags) > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.conference-year,
.page-section-body .mono:first-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.conference-list .list-title,
.publication-list .list-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  max-width: 62ch;
}
.now-list h3,
.project-list h3,
.writing-list h3,
.education-list h3,
.method-list h3,
.cv-list h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.now-list p,
.project-list p,
.publication-list p,
.writing-list p,
.education-list p,
.method-list p,
.cv-list p,
.conference-list p {
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}
.now-list p.mono,
.project-list p.mono,
.publication-list p.mono,
.writing-list p.mono,
.conference-list p.mono {
  font-size: 12px;
  margin-bottom: 8px;
}
.project-list h3 a,
.publication-list .list-title a,
.writing-list h3 a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
}
.project-list h3 a:hover,
.publication-list .list-title a:hover,
.writing-list h3 a:hover {
  color: var(--blue);
  text-decoration-color: currentcolor;
}
.publication-list .authors {
  font-size: 14px;
  margin-bottom: 6px;
}
.plain-list li {
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.plain-list .mono {
  font-size: 12px;
  color: var(--muted);
}
.cv-list .text-link {
  margin-top: 12px;
}

/* Pesquisa atual: peso editorial por escala, sem bloco colorido. */
.research-current article {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}
.research-current h3 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  max-width: 22ch;
}
.research-current h3 a {
  color: var(--ink);
  text-decoration: none;
}
.research-current h3 a:hover {
  color: var(--blue);
}

/* Resultados: dado primario em escala, leitura em texto de apoio. */
.work-org {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .page-section,
  .page-section-wide .page-section-head,
  .selected-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .selected-item .row-arrow {
    display: none;
  }
  .page-section {
    margin-top: 56px;
    padding-top: 28px;
  }
  .page-section-head .note {
    max-width: none;
  }
  .education-list li,
  .now-list li,
  .project-list li,
  .publication-list li,
  .writing-list li,
  .conference-list li,
  .method-list li,
  .cv-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .selected-item h3,
  .selected-item:first-child h3 {
    font-size: 26px;
  }
}

/* Spec 0010, segunda revisao. Menta como campo principal: o par texto/menta mede 12,12:1 no
   design system, entao o ink sobre menta e leitura segura. O painel branco flutua sobre esse
   campo dentro de uma moldura pontilhada, conforme a referencia WeekSync (R06: "borda
   pontilhada"; captura completa: "contornos pontilhados, modulos arredondados"). Ajuste local
   da composicao: os tokens compartilhados e o catalogo da spec 0008 seguem intactos. */
body {
  background: var(--mint);
}
/* Uma largura e um recuo para cabecalho, painel e rodape: as bordas e a coluna de texto
   coincidem nos tres. A calha externa impede que o painel encoste na tela entre 901 e 1360 px. */
.shell {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--page-width);
  margin-inline: auto;
  background: var(--surface);
  border-radius: 20px;
  padding: 0 var(--panel-pad) 88px;
}
footer {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--page-width);
  margin: 28px auto 40px;
  padding: 0;
  background: transparent;
}
.contact-inner {
  border-radius: 20px;
  background: var(--surface);
  padding: 44px var(--panel-pad);
}
/* A regra do rodape fica na coluna de texto, afastada do cartao de contato, e fina sobre o
   campo. Encostada no cartao e na largura inteira, ela nascia da quina arredondada. */
.footer-bottom {
  margin: 28px var(--panel-pad) 0;
  padding: 24px 0 0;
  border-top-color: color-mix(in srgb, var(--field-ink) 22%, transparent);
}

/* Fotografia do acervo como ilustracao da pagina, emoldurada, sem discurso autoral. */
.plate-band {
  margin-top: 96px;
}
.plate {
  margin: 0;
}
.plate {
  background: #fff;
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Mescla das fontes principais nos titulos de secao. */
.page-section-head h2 .mono-heading,
.section-heading h2 .mono-heading,
.education h3 .mono-heading {
  display: block;
  color: var(--muted);
}
.page-section-wide .page-section-head h2 .mono-heading {
  display: inline;
}

@media (max-width: 900px) {
  .shell {
    padding: 32px 24px 64px;
    border-radius: 12px;
  }
  footer {
    margin: 20px auto 28px;
    padding: 0 4px;
  }
  .contact-inner {
    padding: 32px 24px;
    border-radius: 12px;
  }
  .plate-band {
    margin-top: 64px;
  }
}

/* Menta com presenca real: a abertura inteira fica sobre o campo, sangrando na largura do
   painel. O par texto/menta mede 12,12:1 no design system, entao ink sobre menta e seguro. */
.portrait-hero {
  background: var(--mint);
  margin: 0 -56px;
  padding: 48px 56px 56px;
  border-radius: 0 0 20px 20px;
}
.portrait-hero .hero-eyebrow {
  color: var(--green);
}
.portrait-hero .portrait-window {
  background: var(--surface);
}
.portrait-hero .portrait-caption {
  background: var(--surface);
}
.hero-paths li > span,
.hero-paths a .icon {
  color: var(--green);
}

/* Sumario da pagina: indice fixo a esquerda no desktop, como a referencia WeekSync. */
/* O sticky do sumario vale so dentro deste bloco: sem ele, o sumario seguia ate o fim do
   main e ficava por cima da fotografia que fecha a pagina. flow-root contem o float. */
.page-body {
  display: flow-root;
}
.page-sections {
  overflow: hidden;
}
/* Com o sumario ocupando a coluna da esquerda, a secao usa a largura restante. */
.page-sections .page-section {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 40px;
}
.page-sections .page-section-wide {
  grid-template-columns: minmax(0, 1fr);
}
.page-sections .page-section-wide .page-section-head {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 40px;
}
:target {
  scroll-margin-top: var(--header-offset);
}
@media (max-width: 900px) {
  .portrait-hero {
    margin: 0 -24px;
    padding: 32px 24px 40px;
  }
  .page-sections .page-section,
  .page-sections .page-section-wide .page-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Correcao de composicao: com o sumario ocupando a coluna lateral, a secao deixa de ter
   coluna propria. O titulo passa a encabecar o conteudo, eliminando a terceira coluna e a
   faixa morta a esquerda. */
.page-sections .page-section,
.page-sections .page-section-wide,
.page-sections .page-section-wide .page-section-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.page-sections .page-section {
  margin-top: 56px;
  padding-top: 28px;
}
.page-sections .page-section-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  margin-bottom: 24px;
}
.page-sections .page-section-head .page-index {
  margin: 0;
  grid-row: 1;
}
.page-sections .page-section-head h2 {
  grid-column: 2;
  font-size: clamp(24px, 2.6vw, 32px);
}
.page-sections .page-section-head .note {
  grid-column: 2;
  max-width: 62ch;
  margin-top: 8px;
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
}

/* Abertura em menta em todas as paginas, nao so na home: o campo vira assinatura. */
.reading-header {
  background: var(--mint);
  margin: 0 -56px 8px;
  padding: 56px 56px 48px;
  border-radius: 0 0 20px 20px;
  max-width: none;
}
.reading-header .lead {
  max-width: 62ch;
}

/* Sumario alinhado ao topo do conteudo, sem regra solta. */

@media (max-width: 900px) {
  .reading-header {
    margin: 0 -24px 8px;
    padding: 32px 24px 28px;
  }
  .page-sections .page-section {
    margin-top: 40px;
  }
  .page-sections .page-section-head {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
  }
}

/* Secao larga usa o mesmo cabecalho das demais: numero estreito e titulo alinhado a esquerda. */
.page-sections .page-section-wide .page-section-head {
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
}
.page-sections .page-section-wide .page-section-head h2 {
  grid-column: 2;
  font-size: clamp(24px, 2.6vw, 32px);
}
.page-sections .page-section-wide .page-section-head .note {
  grid-column: 2;
}
/* O campo menta acompanha o arredondamento do painel, sem fresta branca no topo. */
.reading-header,
.portrait-hero {
  border-radius: 20px 20px 0 0;
}
.reading-header,
.portrait-hero {
  border-radius: 0 0 20px 20px;
}
main.shell > .breadcrumbs:first-child {
  border-radius: 20px 20px 0 0;
}
main.shell > .portrait-hero:first-child {
  border-radius: 20px;
}
.empty-state {
  color: var(--muted);
  max-width: 56ch;
}

@media (max-width: 900px) {
  .page-sections .page-section-wide .page-section-head {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
  }
}

/* O painel nao tem respiro proprio no topo: o campo menta comeca colado ao cabecalho. */
.shell {
  padding-top: 0;
}
/* Sobre o campo menta, a segunda voz usa o verde de texto, medido em 5,38:1 contra menta.
   O azul fica reservado para acao, como manda o design system. */
.portrait-hero .portrait-intro h1 span {
  color: var(--green);
}

@media (max-width: 900px) {
  .shell {
    padding: 0 24px 64px;
  }
}

/* O campo menta arredonda so no topo, acompanhando o painel, e termina reto no encontro
   com a area de leitura. Arredondar a base abria entalhes brancos nas laterais. */
.reading-header,
.portrait-hero,
main.shell > .portrait-hero:first-child {
  border-radius: 0;
}
main.shell > .breadcrumbs:first-child,
main.shell > .portrait-hero:first-child {
  border-radius: 20px 20px 0 0;
}
/* As fotografias do Skyless Kingdom aparecem inteiras: nada de recorte. */
.plate img {
  height: auto;
  object-fit: contain;
}
.structure-photo img {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  border-radius: 0;
  background: #fff;
}

/* Logotipos de vinculo ajustados ao design system: cor de exibicao normalizada em ink por
   filtro, altura optica por marca e alinhamento pela linha de base. O desenho nao e alterado. */
.affiliations {
  gap: 20px 44px;
  align-items: center;
}
.affiliations a {
  gap: 10px;
  justify-items: start;
}
.affiliations img {
  width: auto;
  filter: brightness(0);
  opacity: 0.88;
  transition: opacity var(--duration) var(--ease);
}
.affiliations a:hover img {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .affiliations img {
    transition: none;
  }
}

/* A marca vive dentro da caixa do vinculo, nao numa fileira solta. Cor de exibicao normalizada
   em ink por filtro e altura optica por marca; o desenho nao e alterado. */
.affiliation {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  min-height: 44px;
}
.affiliation img {
  width: auto;
  filter: brightness(0);
  opacity: 0.82;
  transition: opacity var(--duration) var(--ease);
}
.affiliation:hover img,
.affiliation:focus-visible img {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .affiliation img {
    transition: none;
  }
}
/* Atualmente: periodo, cargo e marca na mesma linha, a marca alinhada a direita. */
.now-list-compact li {
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
}
/* Trajetoria: a organizacao encabeça o grupo e leva a marca ao lado. */

@media (max-width: 900px) {
  .now-list-compact li {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Marca sempre abaixo do nome, como em Atualmente. Com wrap, nomes curtos levavam a marca
     a direita e nomes longos a derrubavam a esquerda, e o grupo perdia o alinhamento. */
}

/* Marcas com presenca maior: a caixa reserva a coluna da direita e as alinha pelo centro. */
.now-list li {
  column-gap: 32px;
}
.now-list li {
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
}
.affiliation {
  min-height: 48px;
  justify-content: flex-end;
}
.affiliation img {
  max-width: 180px;
}

@media (max-width: 900px) {
  .now-list li {
    grid-template-columns: minmax(0, 1fr);
  }
  .affiliation {
    justify-content: flex-start;
    min-height: 44px;
  }
  .affiliation img {
    max-width: 140px;
  }
}

/* O campo passa a usar os tokens, em vez de menta fixa. */
body {
  background: var(--field);
}
.portrait-hero,
.reading-header {
  background: var(--field);
  color: var(--field-ink);
}
.portrait-hero .portrait-intro h1 span,
.portrait-hero .hero-eyebrow,
.hero-paths li > span,
.hero-paths a .icon {
  color: var(--field-muted);
}
.contact-inner {
  background: var(--surface);
  color: var(--ink);
}
footer {
  color: var(--field-ink);
}
.affiliation img {
  filter: var(--logo-filter);
  opacity: var(--logo-opacity);
}
.portrait-hero .portrait-window,
.portrait-hero .portrait-caption {
  background: var(--surface);
  color: var(--ink);
}

/* Botao de tema, ao lado da navegacao. */

/* Diagrama da cortina: horizontal no desktop, vertical em telas estreitas. */
.entry-net-tall {
  display: none;
}
@media (max-width: 700px) {
  .entry-net-wide {
    display: none;
  }
  .entry-net-tall {
    display: block;
    aspect-ratio: 360 / 560;
  }
  .entry-diagram {
    gap: 16px;
  }
  .entry-tiers {
    font-size: 11px;
  }
  .entry-stage h2 {
    margin-bottom: 28px;
  }
}

/* Cabecalho flutuante em capsula. Fica em fluxo no topo e passa a flutuar ao rolar, sobre
   o campo e sobre o painel de leitura. A sombra entra apenas quando ele descola. */
/* Dentro da capsula o texto segue a superficie, nao o campo. */
/* Botao de tema discreto: sem borda, cor de apoio; a borda so aparece no hover. */
/* No desktop o menu ocupa a direita e o botao de tema fecha a linha, alinhado a coluna.
   Antes os dois tinham margin-left: auto e o botao ficava solto no meio da capsula. */
/* O painel comeca logo abaixo da capsula, sem o respiro que o cabecalho antigo criava. */
main.shell {
  margin-top: 12px;
}
@media (max-width: 900px) {
  main.shell {
    margin-top: 8px;
  }
  /* Menu aberto: a capsula cresce e deixa de ser pilula, para caber a lista. */
}

/* Em telas estreitas a capsula ancora embaixo, na zona do polegar, e o menu abre para cima.
   A ordem no HTML nao muda, entao teclado e leitor de tela seguem encontrando a navegacao
   no inicio do documento. */
@media (max-width: 900px) {
  /* A lista sobe acima da linha do rodape flutuante. */
  /* Espaco para a capsula nao cobrir o fim da pagina. */
  body {
    padding-bottom: 96px;
  }
  main.shell {
    margin-top: 8px;
  }
  /* O topo da pagina volta a comecar no painel, sem o respiro do cabecalho em fluxo. */
}

/* O botao de tema usa o icone pixelado do design system, nao caractere Unicode. */

/* Fotografia do Skyless Kingdom: nada de recorte nem canto arredondado, que deturpa a imagem.
   Em telas estreitas a foto sangra ate as bordas da tela, escapando do respiro do painel. */
.plate img {
  border-radius: 0;
}
@media (max-width: 900px) {
  .plate-band {
    margin-inline: -24px;
  }
  .plate,
  .plate img {
    border-radius: 0;
  }
  /* Menu do rodape flutuante: itens listados para cima, um por linha. */
}

/* Menu com hamburguer indicando, e cruz quando aberto. Glifos pixelados do design system. */

/* Vidro dos elementos flutuantes: cabecalho, pilha do menu e folha do sumario. Camada
   translucida com desfoque e uma aresta clara no topo, a luz batendo no material. Um vidro
   nunca fica sobre outro, e a cor de acao vai em camada quase solida para o texto seguir
   legivel (branco sobre o azul solido mede 5,84:1). */
/* Texto sobre vidro: um pouco mais de peso, porque o fundo muda por baixo. */

/* Sumario: a secao atual fica marcada, no desktop e na folha do celular. */

/* Menu em pilha de acoes, nas telas estreitas. O botao de menu vira o disco azul de acao e os
   links sobem como capsulas azuis alinhadas a direita, cada uma com seu glifo. Azul aqui marca
   acao, como pede o design system, com texto em --surface como no .button. No desktop os
   glifos ficam ocultos e a capsula nao muda. */
@media (max-width: 900px) {
  /* Especificidade acima de .site-header #main-nav a, que pinta os links do desktop. */
  /* Pagina atual: tinta em vez de azul, sem sublinhado dentro da capsula. */
  /* A pilha abre de baixo para cima: o item mais proximo do botao chega primeiro. */
  /* Tema dentro da pilha: e ajuste, nao destino, entao usa vidro neutro em vez do azul. */
  /* Tema dentro da pilha: e ajuste, nao destino. Etiqueta menor, em mono e cor de apoio, sem
     sombra, para nao disputar com os links. */

  /* Sumario movel. O botao mostra a secao atual e ocupa o lugar do nome, que fica so no
     icone; a lista abre numa folha de vidro acima da capsula, do lado do botao. */
  .js-toc .toc-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Sumario sticky: so o nome sai, e o mark fica. A regra valia para todo span do wordmark, de
     quando havia um span so; com o mark tambem em span, ela apagava o cabecalho inteiro. */
}

/* Resposta ao toque: tudo que se pressiona afunda levemente. */
.round-link .icon {
  -webkit-tap-highlight-color: transparent;
}

/* Hover so onde ha ponteiro fino: no toque, o hover fica preso depois do toque. */

/* Troca de tema em crossfade curto, via View Transitions, sem salto de brilho. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: ease;
}

/* Movimento reduzido nao e ausencia de resposta: fica o fade, sai o deslocamento. */
/* Transparencia reduzida ou contraste alto: o vidro vira superficie solida. */

/* Home enxuta, rodada de 2026-09-21. A pesquisa e o instrumento viram uma secao so: a pergunta
   em grande escala e o instrumento como resposta. Dentro do escuro, o instrumento perde a
   propria caixa e fica so com linhas, para nao virar caixa dentro de caixa. */
.research-feature.research-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  margin-top: 0;
  padding: 72px 64px 56px;
  border-radius: var(--radius-card);
}
.research-stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 64px;
  align-items: end;
}
.research-stage-head h2 {
  margin: 0;
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.research-stage-head h2 .mono-heading {
  color: var(--mint);
  letter-spacing: 0;
  white-space: nowrap;
}
.research-stage-head p {
  max-width: 46ch;
  margin: 0 0 20px;
  color: var(--invert-muted);
}
.research-stage .layer-instrument {
  background: transparent;
  border: 1px solid var(--invert-line);
}
.research-stage-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--invert-line);
}
.research-stage .publication-preview h3 {
  margin: 8px 0;
  font-size: clamp(24px, 2.4vw, 32px);
}
.research-stage .research-footnote {
  margin: 0;
  padding-top: 0;
  border-top: 0;
  max-width: 40ch;
  text-align: right;
}
/* A foto de infraestrutura abre a pesquisa, logo acima dela, sobre o painel branco. */
.plate-band.research-opening {
  margin-top: 48px;
  margin-bottom: 0;
}
/* Foto e bloco formam uma peca so: o topo do bloco encosta reto na foto, que tambem e reta.
   Arredondado ali abria entalhes brancos entre as duas. So a base conserva o raio. */
.research-opening + .research-feature.research-stage {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
@media (max-width: 900px) {
  .research-feature.research-stage {
    gap: 40px;
    margin-inline: -24px;
    padding: 48px 24px 40px;
    border-radius: 0;
  }
  .research-stage-head,
  .research-stage-foot {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .research-stage .research-footnote {
    text-align: left;
  }
  /* Quando a pesquisa fecha o painel, ela assume a base dele: sem faixa branca solta abaixo
     do bloco que ja sangra de borda a borda. */
  main.shell:has(> .research-stage:last-child) {
    padding-bottom: 0;
  }
  main.shell > .research-stage:last-child {
    border-radius: 0 0 12px 12px;
  }
}

/* Retrato em cor, com canto reto como as fotos do acervo. */
.portrait-hero .portrait .portrait-window,
.portrait-hero .portrait .portrait-window img {
  border-radius: 0;
}

/* Entrada da abertura, so logo depois da cortina da primeira visita da sessao. Enquanto a
   cortina esta aberta, os elementos esperam invisiveis; ao fechar, sobem em defasagem curta.
   Visitas seguintes nao animam: o que se ve toda vez nao deve encenar. */
.hero-pending .portrait-hero .hero-eyebrow,
.hero-pending .portrait-intro > *,
.hero-pending .portrait-hero .portrait {
  opacity: 0;
}
.hero-enter .portrait-hero .hero-eyebrow,
.hero-enter .portrait-intro > *,
.hero-enter .portrait-hero .portrait {
  animation: hero-rise 480ms var(--ease) both;
}
.hero-enter .portrait-intro > :nth-child(1) {
  animation-delay: 60ms;
}
.hero-enter .portrait-intro > :nth-child(2) {
  animation-delay: 120ms;
}
.hero-enter .portrait-intro > :nth-child(3) {
  animation-delay: 180ms;
}
.hero-enter .portrait-hero .portrait {
  animation-name: hero-settle;
  animation-delay: 90ms;
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes hero-settle {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter .portrait-hero .hero-eyebrow,
  .hero-enter .portrait-intro > *,
  .hero-enter .portrait-hero .portrait {
    animation-name: hero-fade;
  }
}
@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

/* Telas estreitas: painel e cartao de contato ocupam a largura da tela, entao canto arredondado
   so recortava a borda. Tudo que sangra de borda a borda fica reto, e o campo menta do topo
   deixa de ter raio proprio (20px contra os 12px do painel abriam entalhes brancos). */
@media (max-width: 900px) {
  .shell,
  .contact-inner,
  main.shell > .breadcrumbs:first-child,
  main.shell > .portrait-hero:first-child,
  main.shell > .research-stage:last-child {
    border-radius: 0;
  }
  footer {
    padding-inline: 0;
  }
}

/* Pincel de pixels (pixels.mjs). O canvas pinta so os blocos sob o ponteiro, com a foto real
   visivel por baixo. Sem JavaScript, nada disso existe. */
.plate {
  position: relative;
}
.pixels-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pixels-layer {
    display: none;
  }
}

/* Seletor de idioma: globo ao lado do tema, do mesmo tamanho, com a lista num cartao de vidro
   que flutua abaixo. Sem JavaScript, o botao fica oculto e a lista vira uma linha de links. */
/* No desktop o globo fecha a linha junto do tema, a direita do menu (o tema tem order: 1). */
.js-lang .lang-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 168px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  border-radius: 14px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--overlay-shadow);
}
.js-lang .lang-menu:has(.lang-toggle[aria-expanded="true"]) .lang-list {
  display: flex;
}
.js-lang .lang-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink);
}
/* Idioma atual: ponto azul a esquerda, o mesmo sinal de "aqui" do sumario. */
.js-lang .lang-list a::before {
  content: "";
  width: 6px;
  height: 6px;
  background: transparent;
}
.js-lang .lang-list a[aria-current]::before {
  background: var(--blue);
}
@media (hover: hover) and (pointer: fine) {
  .js-lang .lang-list a:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}
/* No celular, idioma e tema ficam lado a lado numa fileira ao pe da pilha. O seletor mostra o globo
   e a palavra "Idioma", em tinta: com o idioma atual em cor de apoio, a capsula sumia no tema claro. */
@media (max-width: 900px) {
  .js-lang #main-nav .lang-menu .lang-list {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
  }
  /* Sem a capsula escura de pagina atual dos links do menu: na lista, o atual so ganha o ponto. */
  .js-lang #main-nav .lang-menu .lang-list a,
  .js-lang #main-nav .lang-menu .lang-list a[aria-current] {
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--ink);
    box-shadow: none;
    font: 400 15px/1.2 var(--sans);
  }
}

/* Vocabulario de icones (spec 0011). O icone substitui o rotulo de tipo na coluna da esquerda e
   fica na cor de apoio; o rotulo segue em .sr-only. Nas tags de tema, 16 px ao lado do nome. */
.theme-tags .icon {
  display: block;
  flex: none;
}
.theme-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-tags .icon {
  color: var(--muted);
}

/* Intro de uma linha nos projetos da pagina Pesquisa: o bastante para saber do que se trata, sem o
   resumo inteiro, que fica na pagina do projeto. */
.project-list .project-intro {
  margin-top: 8px;
  max-width: 62ch;
  color: var(--muted);
}

/* Listas com marca de tipo (Pesquisa): coluna da esquerda mais larga para icone e status caberem
   numa linha; a marca fica presa no topo, alinhada ao titulo, e nao centralizada na altura do item. */
@media (min-width: 901px) {
  .project-list li,
  .publication-list li,
  .conference-list li {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}
/* Publicacao: marca de tipo na coluna da esquerda; titulo, autores e veiculo empilhados na direita.
   Antes os autores caiam na coluna da esquerda, embaixo do icone. */
@media (min-width: 901px) {
  .publication-list li > * {
    grid-column: 2;
  }
  .publication-list li > .type-line {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .publication-list li {
    row-gap: 6px;
  }
}

/* Mapa de relacoes: a relacao escolhida aparece dentro da tela, em tamanho cheio e sem o icone, e o
   link para o trabalho ligado a ela fica logo abaixo. A mensagem de status vira so leitura de tela. */

/* Selecao da home: numero e icone de area na mesma linha, a organizacao embaixo. */
.selected-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
}
.selected-meta > :last-child {
  grid-column: 1 / -1;
}
.selected-meta .type-line {
  padding-top: 0;
}

/* Credito das fotos do acervo, discreto como o do retrato, acima da imagem: abaixo dela ele ficava
   grudado no bloco seguinte e abria uma faixa branca. */
.plate figcaption {
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

/* Fotografia que fecha a pagina vai ate a borda de baixo do painel: antes sobrava uma faixa branca
   entre a foto e o fim do painel. Os cantos de baixo acompanham o raio do painel, e o credito, que
   fica acima da imagem, nao e afetado. */
main.shell:has(> .plate-band:last-child) {
  padding-bottom: 0;
}
main.shell > .plate-band:last-child {
  margin-bottom: 0;
}
main.shell > .plate-band:last-child .plate img {
  display: block;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
@media (max-width: 900px) {
  main.shell > .plate-band:last-child .plate img {
    border-radius: 0;
  }
}

/* Feedback de clique no menu. Item de uso frequente: a resposta e quase imperceptivel, 120 ms,
   so transform e cor, com a curva de saida dos tokens. No celular as capsulas ja afundavam; aqui
   entram os links do desktop e a capsula de idioma. Com movimento reduzido fica so a cor. */

/* Spec 0012: tres frentes visiveis e efeitos subordinados a leitura. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}
.hero-actions .relations-link {
  flex-basis: 100%;
}
.hero-actions .teaching-link {
  color: var(--field-ink);
  font-size: 15px;
  font-weight: 400;
}
.round-link .icon {
  color: var(--action-ink);
}
.plate {
  background: var(--photo-surface);
}
.plate figcaption {
  color: var(--photo-ink);
}
.hero-eyebrow {
  border-color: var(--field-line);
}
@media (max-width: 540px) {
  .hero-actions {
    margin-top: 28px;
    gap: 12px 20px;
  }
  .hero-actions .relations-link {
    flex-basis: auto;
  }
  .selected-meta {
    grid-template-columns: auto 1fr;
  }
}
.entry-network {
  position: relative;
  width: 100%;
  height: min(46vh, 400px);
  margin: 24px 0 32px;
}
.entry-network .entry-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: visible;
}
/* overlay.mjs refaz os tracos na medida real da area, entao a espessura e em pixels e igual
   nos dois eixos. */
.entry-network .entry-net path {
  stroke: var(--mint);
  stroke-width: 1.5;
}
.entry-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  /* Os nomes sao o conteudo da rede, nao metadado: 13 px ficava pequeno diante da frase. */
  font: 16px/1.4 var(--mono);
  color: var(--invert-ink);
}
.entry-node i {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--mint);
  border: 3px solid var(--invert-surface);
  box-sizing: content-box;
  border-radius: 50%;
}
@media (max-width: 700px) {
  .entry-network {
    height: min(48vh, 400px);
  }
  .entry-node {
    font-size: 14px;
  }
}
.entry-node {
  transform: translate(-50%, -8px);
  gap: 0;
}
/* O fundo protege so o nome, que fica abaixo do ponto. No no inteiro, ele apagava os tracos que
   chegam pela lateral, na altura do ponto, e eles pareciam terminar no vazio. O recuo de cima
   substitui o vao entre ponto e nome, para nao sobrar pedaco de traco entre os dois. */
.entry-node span {
  background: var(--invert-surface);
  padding: 10px 4px 0;
}
/* Spec 0013: hierarquia das chamadas e narrativa dos cases. */
.hero-actions {
  display: grid;
  gap: 12px;
}
.hero-actions .round-link {
  justify-self: start;
}
.hero-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}
.hero-actions .relations-link {
  flex-basis: auto;
}
.hero-secondary .teaching-link,
.hero-secondary .relations-link {
  font-size: 14px;
}
.replay-opening {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  margin-top: 12px;
  color: var(--invert-muted);
  font: 12px/1.5 var(--mono);
}
main.shell > .plate-band:last-child .plate img {
  border-radius: 0;
}
.case-overview {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  padding-block: 40px;
  margin-bottom: 56px;
  border-block: 1px solid var(--hairline);
}
.case-brief {
  display: grid;
  gap: 24px;
  align-content: start;
}
.case-overview h2 {
  font: 400 13px/1.5 var(--mono);
  letter-spacing: 0;
  margin-bottom: 12px;
  color: var(--muted);
}
.case-brief p {
  font-size: 18px;
  max-width: 60ch;
  margin: 0;
}
.case-outcomes .results {
  margin-bottom: 12px;
}
.case-outcomes .results li:first-child {
  border-top: 0;
  padding-top: 0;
}
.case-outcomes .source-note {
  margin: 0;
}
.case-narrative .decision-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 40px;
}
.case-narrative .decision-list li {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  margin: 0;
  max-width: none;
}
.case-narrative .decision-list .mono {
  display: block;
  color: var(--muted);
  margin-bottom: 12px;
}
.case-narrative .decision-list p {
  margin: 0;
}
@media (max-width: 800px) {
  .case-overview {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 28px;
    margin-bottom: 40px;
  }
  .case-brief p {
    font-size: 17px;
  }
  .case-narrative .decision-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 540px) {
  .portrait-intro h1 {
    margin-bottom: 24px;
  }
  .personal-intro p:last-child {
    margin-bottom: 0;
  }
  .hero-actions {
    margin-top: 20px;
    gap: 4px;
  }
  .hero-secondary {
    gap: 0 16px;
  }
  .portrait-intro {
    padding-bottom: 20px;
  }
}