/* Etapa 5: atos visuais na identidade sumi-ê Targonverse RPGs. */

:root {
  --color-paper-aged: #d8c196;
  --color-paper-aged-light: #ead9b6;
  --color-paper-burn: #6d482b;
}

html {
  scrollbar-color: var(--color-border-strong) var(--color-bg-page);
}

body {
  accent-color: var(--color-accent-solid);
}

.hero-copy::before {
  display: block;
  width: clamp(5rem, 11vw, 9rem);
  height: 0.38rem;
  margin-block-end: var(--space-5);
  background: linear-gradient(90deg, var(--color-accent-solid), var(--color-accent-solid-hover) 64%, transparent);
  clip-path: polygon(0 24%, 93% 0, 100% 47%, 82% 70%, 4% 100%);
  content: "";
  transform: rotate(-1.5deg);
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  position: absolute;
  inset: auto 0 0.35rem;
  height: 1px;
  background: var(--color-accent-solid-hover);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-out);
}

.site-nav a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

.world-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-block-start: 1px solid rgb(225 58 66 / 50%);
  background: linear-gradient(145deg, rgb(189 32 40 / 13%), transparent 28%);
  content: "";
  pointer-events: none;
}

.world-card-title {
  text-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 88%);
}

.pulse-map,
.journey,
.worlds-stage,
.master-atlas,
.fit-compass,
.faq-atlas,
.closing-portal {
  content-visibility: auto;
  contain-intrinsic-size: auto 48rem;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Hero: as lâminas já ocupam a área final; o estado revela pelo recorte. */

.world-card img {
  scale: 1;
  transition: transform var(--motion-interactive) var(--ease-in-out);
}

.world-card--ninja img {
  object-position: 31% center;
}

.world-card--arcane img {
  object-position: 30% center;
}

@media (min-width: 68.01rem) {
  .world-card--arcane img {
    transform: translateX(13%);
  }
}

.world-card--occult img {
  object-position: 50% 100%;
}

@media (min-width: 68.01rem) {
  .world-stage {
    min-height: clamp(34rem, 64vh, 43rem);
    padding-block: 0;
  }

  .world-composition {
    position: relative;
    display: block;
    min-height: clamp(34rem, 64vh, 43rem);
    height: clamp(34rem, 64vh, 43rem);
  }

  .world-card {
    position: absolute;
    inset-block-start: 50%;
    width: 68%;
    height: 94%;
    transform: translateY(-50%);
    transform-origin: center;
    transition-property: clip-path, transform, opacity, border-color;
    transition-duration: var(--motion-interactive);
    transition-timing-function: var(--ease-in-out);
  }

  .world-card--ninja {
    inset-inline-start: 0;
    clip-path: polygon(0 7%, 47% 0, 43% 96%, 0 100%);
  }

  .world-card--featured {
    inset-inline-start: 16%;
    clip-path: polygon(27% 1%, 82% 8%, 78% 100%, 22% 96%);
  }

  .world-card--occult {
    inset-inline-end: 0;
    clip-path: polygon(57% 2%, 100% 8%, 100% 100%, 53% 94%);
  }

  .world-card--occult img {
    transform: translateX(19%);
  }

  .world-card--portal {
    height: 88%;
  }

  .world-card--ninja .world-card-content {
    inset-inline: 6% auto;
  }

  .world-card--featured .world-card-content {
    inset-inline: 31% auto;
  }

  .world-card--occult .world-card-content {
    inset-inline: auto 6%;
    text-align: end;
  }

  .world-card-title {
    max-width: 12ch;
    font-size: clamp(1.05rem, 1.45vw, 1.45rem);
    line-height: 0.96;
    text-wrap: balance;
  }

  .world-card--featured .world-card-title {
    max-width: 11ch;
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  }

  .world-card--occult .world-card-title {
    max-width: 16ch;
    font-size: clamp(0.92rem, 1.18vw, 1.18rem);
  }

  .world-card:focus-visible .world-card-title {
    max-width: 17ch;
    font-size: clamp(1.35rem, 2vw, 2rem);
  }

  .world-card:focus-visible {
    z-index: 5;
    filter: saturate(1) brightness(1);
    transform: translateY(-50%) scale(1.015);
  }

  .world-card--ninja:focus-visible {
    clip-path: polygon(0 6%, 100% 0, 95% 100%, 0 96%);
  }

  .world-card--featured:focus-visible {
    clip-path: polygon(5% 1%, 100% 8%, 95% 100%, 0 96%);
  }

  .world-card--arcane:focus-visible img {
    transform: scale(1.01);
  }

  .world-card--occult:focus-visible {
    clip-path: polygon(5% 2%, 100% 8%, 100% 100%, 0 94%);
  }

  .world-card--occult:focus-visible img {
    transform: scale(1.01);
  }

  .world-composition:has(.world-card:focus-visible) .world-card:not(:focus-visible) {
    opacity: 0.42;
    filter: saturate(0.52) brightness(0.48);
  }

  .world-card:focus-visible,
  .world-composition:has(.world-card:focus-visible) .world-card:not(:focus-visible) {
    transition-duration: 0.01ms;
  }

  .world-composition:has(.world-card:focus-visible) .world-card--ninja:not(:focus-visible) {
    transform: translate(-1.5rem, -50%);
  }

  .world-composition:has(.world-card:focus-visible) .world-card--featured:not(:focus-visible) {
    transform: translateY(-50%) scale(0.97);
  }

  .world-composition:has(.world-card:focus-visible) .world-card--occult:not(:focus-visible) {
    transform: translate(1.5rem, -50%);
  }
}

@media (min-width: 68.01rem) and (hover: hover) and (pointer: fine) {
  .world-card:hover {
    z-index: 5;
    filter: saturate(1) brightness(1);
    transform: translateY(-50%) scale(1.015);
  }

  .world-card:hover img {
    scale: 1;
    transform: scale(1.01);
  }

  .world-card:hover .world-card-title {
    max-width: 17ch;
    font-size: clamp(1.35rem, 2vw, 2rem);
  }

  .world-card--ninja:hover {
    clip-path: polygon(0 6%, 100% 0, 95% 100%, 0 96%);
  }

  .world-card--featured:hover {
    clip-path: polygon(5% 1%, 100% 8%, 95% 100%, 0 96%);
  }

  .world-card--occult:hover {
    clip-path: polygon(5% 2%, 100% 8%, 100% 100%, 0 94%);
  }

  .world-composition:has(.world-card:hover) .world-card:not(:hover) {
    opacity: 0.42;
    filter: saturate(0.52) brightness(0.48);
  }

  .world-composition:has(.world-card:hover) .world-card--ninja:not(:hover) {
    transform: translate(-1.5rem, -50%);
  }

  .world-composition:has(.world-card:hover) .world-card--featured:not(:hover) {
    transform: translateY(-50%) scale(0.97);
  }

  .world-composition:has(.world-card:hover) .world-card--occult:not(:hover) {
    transform: translate(1.5rem, -50%);
  }
}

/* Pulso: o arquivo materializa escolhas registradas e consequências. */

.pulse-map {
  position: relative;
  min-height: clamp(45rem, 82vh, 58rem);
  overflow: hidden;
  border-block-end: 1px solid var(--color-separator);
  background: var(--color-bg-sunken);
  isolation: isolate;
}

.brand-seal {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.brand-seal--pulse {
  inset: 50% -5rem auto auto;
  width: min(34rem, 44vw);
  opacity: 0.13;
  filter: contrast(1.12) saturate(0.72);
  mix-blend-mode: screen;
  transform: translateY(-50%) rotate(5deg);
}

.pulse-map-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.7;
  pointer-events: none;
}

.pulse-map-field img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.08) brightness(0.72);
}

.pulse-map::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 72% 42%, rgb(189 32 40 / 14%), transparent 26rem),
    linear-gradient(180deg, var(--color-bg-page) 0, rgb(7 6 6 / 24%) 18%, rgb(7 6 6 / 80%) 100%),
    linear-gradient(90deg, rgb(7 6 6 / 86%) 0, rgb(7 6 6 / 50%) 42%, rgb(7 6 6 / 30%) 72%, rgb(7 6 6 / 76%) 100%);
  content: "";
  pointer-events: none;
}

.pulse-map-inner {
  padding-block: clamp(5rem, 9vw, 9rem);
}

.pulse-map-header,
.journey-header,
.worlds-intro,
.master-header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.48fr);
  align-items: end;
  gap: var(--space-7);
}

.pulse-map-header h2,
.journey-header h2,
.worlds-intro h2,
.master-header h2 {
  max-width: 13ch;
}

.pulse-map-header p,
.journey-header p,
.worlds-intro p,
.master-header p {
  max-width: 36rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
}

.pulse-route {
  position: relative;
  min-height: 27rem;
  margin-block: var(--space-8) var(--space-6);
}

.pulse-route-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pulse-route-line path {
  fill: none;
  stroke: rgb(225 58 66 / 76%);
  stroke-dasharray: 5 11;
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.pulse-events {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pulse-event {
  position: absolute;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  width: min(24rem, 31%);
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgb(7 6 6 / 86%);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 20%);
}

.pulse-event--choice {
  inset: auto auto 0 0;
}

.pulse-event--echo {
  inset: 0 auto auto 36%;
}

.pulse-event--legacy {
  inset: 19% 0 auto auto;
}

.pulse-node {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-inverse);
  background: var(--color-accent-solid);
  font-size: var(--text-caption);
  font-weight: 600;
}

.pulse-event h3 {
  margin-block-end: var(--space-2);
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.pulse-event p {
  margin: 0;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.pulse-map .prototype-note {
  max-width: 47rem;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: rgb(18 14 14 / 88%);
}

/* Entrada: quatro pontos no mesmo percurso, sem cartões equivalentes. */

.journey {
  overflow: hidden;
  background:
    linear-gradient(104deg, transparent 0 18%, rgb(189 32 40 / 8%) 18.2% 18.6%, transparent 18.8% 64%, rgb(242 236 229 / 4%) 64.2% 64.4%, transparent 64.6%),
    radial-gradient(circle at 12% 50%, rgb(189 32 40 / 12%), transparent 28rem),
    var(--color-bg-surface);
}

.journey-header {
  margin-block-end: var(--space-8);
}

.journey-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: var(--space-6) 0 0;
  border-block-start: 1px solid var(--color-border-strong);
  list-style: none;
}

.journey-step {
  position: relative;
  display: grid;
  grid-template-rows: 4rem auto;
  gap: var(--space-5);
  padding-inline: var(--space-5);
}

.journey-step:first-child {
  padding-inline-start: 0;
}

.journey-step:last-child {
  padding-inline-end: 0;
}

.journey-step:not(:last-child) {
  border-inline-end: 1px solid var(--color-border-subtle);
}

.journey-step::before {
  position: absolute;
  inset-block-start: calc(var(--space-6) * -1 - 0.3rem);
  inset-inline-start: var(--space-5);
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-accent-solid);
  content: "";
}

.journey-step:first-child::before {
  inset-inline-start: 0;
}

.journey-step svg {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--color-accent-text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.journey-step h3 {
  margin-block-end: var(--space-2);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}

.journey-step p {
  max-width: 24ch;
  margin: 0;
  color: var(--color-text-secondary);
}

/* Mundos: capítulos de imagem inteira, alternando o lado da decisão. */

.worlds-stage {
  padding-block: clamp(6rem, 9vw, 9rem) 0;
  background: var(--color-bg-page);
}

.worlds-intro {
  margin-block-end: clamp(4rem, 7vw, 7rem);
}

.world-chapters {
  border-block-start: 1px solid var(--color-separator);
}

.world-chapter {
  position: relative;
  display: grid;
  min-height: clamp(38rem, 76vh, 50rem);
  overflow: hidden;
  border-block-end: 1px solid var(--color-separator);
  isolation: isolate;
}

.world-chapter-art,
.world-chapter-art::after {
  position: absolute;
  inset: 0;
}

.world-chapter-art {
  z-index: -2;
  margin: 0;
}

.world-chapter-art::after {
  background:
    linear-gradient(180deg, rgb(7 6 6 / 14%), rgb(7 6 6 / 58%)),
    linear-gradient(90deg, rgb(7 6 6 / 94%) 0 28%, transparent 68%);
  content: "";
}

.world-chapter--ninja .world-chapter-art::after {
  background:
    linear-gradient(180deg, rgb(7 6 6 / 12%), rgb(7 6 6 / 62%)),
    linear-gradient(270deg, rgb(7 6 6 / 96%) 0 28%, transparent 68%);
}

.world-chapter-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06);
  transition: filter 500ms var(--ease-out), transform 700ms var(--ease-out);
}

.world-chapter:focus-within .world-chapter-art img {
  filter: saturate(1) contrast(1.04);
}

.world-chapter--ninja .world-chapter-art img {
  object-position: 36% center;
}

.world-chapter--arcane .world-chapter-art img {
  object-position: 44% center;
}

.world-chapter--occult .world-chapter-art img {
  object-position: 54% 64%;
}

.world-chapter-copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(37rem, 42%);
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) var(--gutter);
}

.world-chapter--ninja .world-chapter-copy {
  justify-self: end;
}

.world-chapter-copy h3 {
  max-width: 10ch;
  margin-block-end: var(--space-5);
  font-size: clamp(3.2rem, 6vw, 6rem);
  line-height: 0.9;
}

.world-chapter-copy p {
  max-width: 31rem;
  margin-block-end: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  text-wrap: pretty;
}

.world-chapter-copy a {
  align-self: flex-start;
  padding-block: var(--space-2);
  border-block-end: 1px solid currentColor;
  color: var(--color-accent-text);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.065em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Mestres: duas composições equivalentes, imagem e voz em paridade. */

.master-atlas {
  border-block: 1px solid var(--color-separator);
  background:
    radial-gradient(circle at 20% 36%, rgb(189 32 40 / 11%), transparent 30rem),
    radial-gradient(circle at 82% 72%, rgb(242 236 229 / 5%), transparent 32rem),
    var(--color-bg-surface);
}

.master-header {
  margin-block-end: var(--space-8);
}

.master-list {
  display: grid;
  gap: var(--space-7);
}

.master-profile {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  min-height: clamp(28rem, 48vw, 34rem);
  overflow: hidden;
  border-block: 1px solid var(--color-border-default);
  background:
    linear-gradient(112deg, rgb(189 32 40 / 9%), transparent 28%),
    rgb(13 10 10 / 88%);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 22%);
}

.master-profile--evtsu .master-portrait {
  grid-column: 2;
}

.master-profile--evtsu .master-copy {
  grid-column: 1;
  grid-row: 1;
}

.master-portrait {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.master-portrait::after {
  position: absolute;
  inset: 0;
  border: 0.75rem solid transparent;
  background:
    linear-gradient(90deg, rgb(7 6 6 / 70%), transparent 20% 80%, rgb(7 6 6 / 64%)),
    linear-gradient(180deg, transparent 58%, rgb(7 6 6 / 58%));
  content: "";
  pointer-events: none;
}

.master-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.master-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.master-copy h3 {
  margin-block-end: var(--space-3);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.9;
}

.master-role {
  margin-block-end: var(--space-5);
  color: var(--color-accent-text);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.master-profile--targa .master-role {
  color: var(--color-host-targa);
}

.master-profile--evtsu .master-role {
  color: var(--color-host-evtsu);
}

.master-copy > p:not(.master-role) {
  max-width: 38rem;
  margin-block-end: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
}

.master-copy blockquote {
  max-width: 32rem;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-style: normal;
  line-height: 1.2;
}

.master-copy blockquote::before {
  color: var(--color-accent-solid-hover);
  content: "“";
}

/* Qualificação: uma bússola de expectativas, não dois cards concorrentes. */

.fit-compass {
  background:
    radial-gradient(circle at 50% 50%, rgb(189 32 40 / 10%), transparent 32rem),
    linear-gradient(165deg, transparent 0 46%, rgb(242 236 229 / 3%) 46.2% 46.4%, transparent 46.7%),
    var(--color-bg-page);
}

.fit-compass-inner {
  display: grid;
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.fit-compass-copy h2 {
  margin-block-end: var(--space-5);
}

.fit-compass-copy p {
  max-width: 32rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
}

.fit-compass-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--color-border-subtle);
}

.fit-compass-guide > div {
  padding: var(--space-7);
}

.fit-compass-guide > div + div {
  border-inline-start: 1px solid var(--color-border-default);
}

.fit-compass-guide h3 {
  margin-block-end: var(--space-5);
}

.fit-compass-guide ul {
  margin: 0;
  padding: 0;
  color: var(--color-text-secondary);
  list-style: none;
}

.fit-compass-guide li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.fit-compass-guide li::before {
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--color-accent-text);
  content: "";
  transform: rotate(45deg);
}

.fit-compass-guide li + li {
  margin-block-start: var(--space-3);
}

/* FAQ: título fixa o contexto; perguntas fazem a varredura. */

.faq-atlas {
  border-block-start: 1px solid var(--color-separator);
  background:
    radial-gradient(circle at 12% 22%, rgb(116 20 26 / 13%), transparent 30rem),
    var(--color-bg-surface);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
}

.faq-heading {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-7));
}

.faq-heading h2 {
  margin-block-end: var(--space-5);
}

.faq-heading p {
  max-width: 31rem;
  margin: 0;
  color: var(--color-text-secondary);
}

.faq-atlas .faq-list {
  max-width: none;
}

.faq-atlas .faq-list details:first-child {
  border-block-start: 1px solid var(--color-border-default);
}

.faq-atlas .faq-list summary {
  min-height: 4.5rem;
  padding-inline-end: 3.5rem;
}

.faq-atlas .faq-list summary::after {
  width: 1.1rem;
  height: 1.1rem;
  background:
    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 100% 1px no-repeat,
    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 1px 100% no-repeat;
  content: "";
  transition: transform var(--motion-fast) var(--ease-out);
}

.faq-atlas .faq-list details[open] summary::after {
  transform: rotate(45deg);
}

/* Encerramento: a matéria se abre e transforma a decisão em passagem. */

.closing-portal {
  position: relative;
  display: grid;
  min-height: clamp(36rem, 68vh, 48rem);
  place-items: center;
  overflow: hidden;
  background: var(--color-bg-page);
  isolation: isolate;
}

.closing-portal::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(7 6 6 / 97%) 0 34%, rgb(7 6 6 / 63%) 60%, rgb(7 6 6 / 78%) 100%),
    linear-gradient(180deg, rgb(7 6 6 / 30%), transparent 42%, rgb(7 6 6 / 90%));
  content: "";
  pointer-events: none;
}

.closing-portal-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.closing-portal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.88) contrast(1.08) brightness(0.72);
}

.closing-portal-map {
  position: absolute;
  inset: 50% auto auto 66%;
  z-index: -1;
  width: min(46rem, 58vw);
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: 0.28;
  pointer-events: none;
}

.closing-portal-map svg {
  width: 100%;
  fill: none;
  stroke: rgb(225 58 66 / 52%);
  stroke-dasharray: 3 9;
  stroke-width: 1;
}

.closing-portal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.45fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
}

.closing-portal-copy h2 {
  max-width: 11ch;
  margin-block-end: var(--space-5);
  font-size: clamp(3.5rem, 7vw, 6rem);
}

.closing-portal-copy p {
  max-width: 38rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
}

.closing-portal-action {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.closing-portal-action .button {
  min-width: 14rem;
}

.closing-portal .config-note {
  max-width: 26rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

@media (max-width: 68rem) {
  .pulse-map-header,
  .journey-header,
  .worlds-intro,
  .master-header,
  .fit-compass-inner,
  .faq-layout,
  .closing-portal-inner {
    grid-template-columns: 1fr;
  }

  .journey-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) 0;
  }

  .journey-step:nth-child(2) {
    border-inline-end: 0;
  }

  .journey-step:nth-child(n + 3) {
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .journey-step:nth-child(n + 3)::before {
    inset-block-start: -0.3rem;
  }

  .world-chapter-copy {
    width: min(33rem, 52%);
  }

  .master-profile {
    min-height: 30rem;
  }

  .faq-heading {
    position: static;
  }

  .closing-portal-inner {
    align-items: start;
  }
}

@media (max-width: 48rem) {
  :root {
    --header-height: 5.5rem;
  }

  .brand-wordmark {
    width: 10.5rem;
  }

  .brand-seal--pulse {
    inset: 26% -8rem auto auto;
    width: 26rem;
    opacity: 0.1;
  }

  .pulse-map {
    min-height: 0;
  }

  .pulse-map-field {
    opacity: 0.72;
  }

  .pulse-map-field img {
    object-position: center top;
  }

  .pulse-map::after {
    background:
      linear-gradient(180deg, rgb(7 6 6 / 90%) 0, rgb(7 6 6 / 44%) 28%, rgb(7 6 6 / 86%) 100%),
      linear-gradient(90deg, rgb(7 6 6 / 68%), transparent 76%);
  }

  .pulse-map-header,
  .journey-header,
  .worlds-intro,
  .master-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pulse-route {
    min-height: 0;
    margin-block: var(--space-7) var(--space-6);
  }

  .pulse-route-line {
    display: none;
  }

  .pulse-events {
    position: relative;
    display: grid;
    gap: var(--space-5);
  }

  .pulse-events::before {
    position: absolute;
    inset: 1.25rem auto 1.25rem 1.25rem;
    width: 1px;
    background: var(--color-border-strong);
    content: "";
  }

  .pulse-event {
    position: relative;
    inset: auto;
    width: 100%;
    padding: var(--space-4) 0;
    background: transparent;
  }

  .pulse-node {
    position: relative;
    z-index: 1;
  }

  .journey-track {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .journey-step,
  .journey-step:first-child,
  .journey-step:nth-child(n + 3) {
    grid-template-columns: 3.25rem 1fr;
    grid-template-rows: auto;
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-block-start: 1px solid var(--color-border-subtle);
    border-inline-end: 0;
  }

  .journey-step::before {
    display: none;
  }

  .worlds-stage {
    padding-block-start: var(--space-9);
  }

  .world-chapter {
    min-height: 42rem;
  }

  .world-chapter-art::after,
  .world-chapter--ninja .world-chapter-art::after {
    background: linear-gradient(180deg, rgb(7 6 6 / 8%) 0 35%, rgb(7 6 6 / 98%) 78% 100%);
  }

  .world-chapter--ninja .world-chapter-art img {
    object-position: 42% center;
  }

  .world-chapter--arcane .world-chapter-art img {
    object-position: 34% center;
  }

  .world-chapter--occult .world-chapter-art img {
    object-position: center 42%;
  }

  .world-chapter-copy,
  .world-chapter--ninja .world-chapter-copy {
    align-self: end;
    justify-self: stretch;
    width: 100%;
    min-height: auto;
    justify-content: end;
    padding: 10rem var(--gutter) var(--space-7);
  }

  .world-chapter-copy h3 {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .master-profile,
  .master-profile--evtsu {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .master-profile--evtsu .master-portrait,
  .master-profile--evtsu .master-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .master-portrait {
    aspect-ratio: 4 / 5;
  }

  .master-copy {
    padding: var(--space-7) var(--space-5);
  }

  .fit-compass-guide {
    grid-template-columns: 1fr;
  }

  .fit-compass-guide > div {
    padding-inline: 0;
  }

  .fit-compass-guide > div + div {
    border-block-start: 1px solid var(--color-border-default);
    border-inline-start: 0;
  }

  .closing-portal {
    min-height: 43rem;
  }

  .closing-portal::before {
    background: linear-gradient(180deg, rgb(7 6 6 / 90%) 0, rgb(7 6 6 / 64%) 48%, rgb(7 6 6 / 97%) 100%);
  }

  .closing-portal-map {
    inset: 20% auto auto 76%;
    width: 32rem;
  }

  .closing-portal-copy h2 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .closing-portal-action {
    justify-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-card,
  .world-card img,
  .faq-atlas .faq-list summary::after {
    transition-duration: 0.01ms;
  }
}

/* Mestres preservam a identidade cromática dos avatares e a biografia original. */

.master-portrait img {
  filter: saturate(1.04) contrast(1.1) brightness(0.9);
}

.master-profile--targa {
  box-shadow: 0.85rem 0.9rem 0 #a31320, 0 2rem 5rem rgb(0 0 0 / 48%);
}

.master-profile--evtsu {
  box-shadow: -0.85rem 0.9rem 0 #245aa4, 0 2rem 5rem rgb(0 0 0 / 48%);
}

.master-profile--targa .master-role {
  color: #a31320;
}

.master-profile--evtsu .master-role {
  color: #245aa4;
}

.master-profile--targa .master-copy h3 {
  text-shadow: 0.18rem 0.2rem 0 rgb(163 19 32 / 30%);
}

.master-profile--evtsu .master-copy h3 {
  text-shadow: 0.18rem 0.2rem 0 rgb(36 90 164 / 28%);
}

.master-lead {
  color: #080808 !important;
  font-weight: 600;
}

@media (max-width: 48rem) {
  .master-profile--targa {
    box-shadow: 0.42rem 0.5rem 0 #a31320;
  }

  .master-profile--evtsu {
    box-shadow: 0.42rem 0.5rem 0 #245aa4;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 68.01rem) {
  .world-card:focus-visible,
  .world-composition:has(.world-card:focus-visible) .world-card:not(:focus-visible) {
    transform: translateY(-50%);
  }

  .world-composition:has(.world-card:focus-visible) .world-card--ninja:not(:focus-visible),
  .world-composition:has(.world-card:focus-visible) .world-card--occult:not(:focus-visible) {
    transform: translateY(-50%);
  }
}

@media (forced-colors: active) {
  .pulse-node,
  .journey-step svg,
  .world-chapter-copy a,
  .master-profile,
  .fit-compass-guide,
  .faq-atlas .faq-list details {
    border-color: CanvasText;
    color: CanvasText;
  }
}

/* Etapa 5B — reconstrução material: página de mangá, sumi-ê e cinábrio. */

body {
  background: #030303;
}

body::before {
  background-image: radial-gradient(rgb(245 241 235 / 8%) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
  opacity: 0.22;
}

h1,
h2,
h3,
.world-card-title,
.master-copy blockquote {
  font-family: var(--font-display);
  font-weight: 400;
}

.site-header {
  border-block-end: 2px solid rgb(245 241 235 / 12%);
  background: rgb(0 0 0 / 96%);
}

.button {
  border-width: 2px;
  clip-path: polygon(1.5% 8%, 98% 0, 100% 88%, 2% 100%);
}

.button--primary {
  color: #fff;
  background: #c51f2d;
  box-shadow: 0.42rem 0.42rem 0 #f5f1eb;
}

.hero::before {
  background-position: center;
  opacity: 0.94;
}

.hero::after {
  background:
    linear-gradient(90deg, #030303 0 25%, rgb(3 3 3 / 78%) 40%, rgb(3 3 3 / 8%) 69%, rgb(3 3 3 / 46%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 22%), transparent 48%, rgb(0 0 0 / 82%) 100%);
}

.hero-atmosphere {
  display: none;
}

.hero-copy::before {
  height: 0.62rem;
  background: #c51f2d;
  clip-path: polygon(0 30%, 100% 0, 88% 62%, 4% 100%);
}

.hero-copy h1 {
  max-width: 11ch;
  line-height: 0.94;
  text-shadow: 0.3rem 0.35rem 0 #000;
}

.world-card {
  border: 2px solid rgb(245 241 235 / 42%);
  background: #050505;
  box-shadow: 0.65rem 0.7rem 0 rgb(197 31 45 / 78%), 0 2rem 4rem rgb(0 0 0 / 76%);
}

.world-card::before {
  inset: 0;
  border: 0;
  background:
    linear-gradient(118deg, rgb(197 31 45 / 36%), transparent 30%),
    linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 92%));
  mix-blend-mode: normal;
}

.world-card::after {
  position: absolute;
  inset: 0.75rem 0 auto;
  z-index: 4;
  height: 0.45rem;
  background: #c51f2d;
  clip-path: polygon(0 40%, 96% 0, 100% 66%, 7% 100%);
  content: "";
  opacity: 0.82;
  pointer-events: none;
}

.world-card img {
  filter: saturate(0.96) contrast(1.1) brightness(0.82);
}

.world-card:is(:hover, :focus-visible) img {
  filter: saturate(1.08) contrast(1.12) brightness(0.94);
}

.world-card--portal {
  filter: none;
}

.world-card-title {
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0.16rem 0.2rem 0 #000, 0 0.75rem 1.4rem #000;
}

.section-ink-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.section-ink-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pulse-map {
  background: #000;
}

.pulse-map-field {
  opacity: 0.9;
}

.pulse-map-field img {
  filter: contrast(1.08) brightness(0.68);
}

.brand-seal--pulse {
  inset: 52% -4rem auto auto;
  width: min(24rem, 30vw);
  opacity: 0.12;
  filter: grayscale(1) contrast(1.35);
}

.pulse-map::after {
  background: linear-gradient(180deg, #030303 0, rgb(3 3 3 / 38%) 20%, rgb(3 3 3 / 66%) 100%);
}

.pulse-route-line path {
  stroke: #c51f2d;
  stroke-dasharray: 22 9;
  stroke-width: 7;
}

.pulse-event {
  color: #080808;
  background: #f5f1eb;
  box-shadow: 0.55rem 0.65rem 0 #c51f2d, 0 1.5rem 4rem rgb(0 0 0 / 48%);
  clip-path: polygon(1% 4%, 98% 0, 100% 91%, 4% 100%);
}

.pulse-event h3,
.pulse-event p {
  color: #080808;
}

.pulse-node {
  border: 2px solid #080808;
  border-radius: 0;
  color: #fff;
  background: #c51f2d;
  clip-path: polygon(10% 0, 100% 8%, 88% 100%, 0 86%);
}

.pulse-map .prototype-note {
  border: 0;
  border-inline-start: 0.55rem solid #c51f2d;
  color: #f5f1eb;
  background: #030303;
}

.journey,
.master-atlas {
  position: relative;
  background: #030303;
  isolation: isolate;
}

.journey::after,
.master-atlas::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 36%), rgb(0 0 0 / 74%));
  content: "";
  pointer-events: none;
}

.journey-ink-art {
  opacity: 0.58;
}

.journey > .shell,
.master-atlas > .shell {
  position: relative;
  z-index: 1;
}

.journey-track {
  border-block-start: 0.5rem solid #c51f2d;
}

.journey-step {
  min-height: 17rem;
  padding-block: var(--space-5);
  background: rgb(0 0 0 / 76%);
}

.journey-step:not(:last-child) {
  border-inline-end: 3px solid #f5f1eb;
}

.journey-step::before {
  width: 1.25rem;
  height: 0.55rem;
  border-radius: 0;
  background: #f5f1eb;
  transform: rotate(-7deg);
}

.journey-step svg {
  stroke: #f5f1eb;
  stroke-width: 2.4;
  filter: drop-shadow(0.3rem 0.3rem 0 #c51f2d);
}

.worlds-stage {
  background: #030303;
}

.worlds-intro h2::after,
.master-header h2::after,
.faq-heading h2::after {
  display: block;
  width: min(8rem, 42%);
  height: 0.65rem;
  margin-block-start: var(--space-4);
  background: #c51f2d;
  clip-path: polygon(0 32%, 100% 0, 92% 74%, 5% 100%);
  content: "";
}

.world-chapter {
  border-block-end: 4px solid #f5f1eb;
}

.world-chapter-art::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(197 31 45 / 22%);
  content: "";
  mix-blend-mode: multiply;
}

.world-chapter-art img,
.world-chapter:focus-within .world-chapter-art img {
  filter: saturate(0.92) contrast(1.12) brightness(0.78);
}

.world-chapter:focus-within .world-chapter-art img {
  filter: saturate(1.04) contrast(1.1) brightness(0.84);
}

.world-chapter--arcane .world-chapter-art::before {
  background: rgb(197 31 45 / 9%);
}

.world-chapter--arcane .world-chapter-art img,
.world-chapter--arcane:focus-within .world-chapter-art img {
  object-position: center;
  filter: saturate(1.02) contrast(1.08) brightness(0.94);
  transform: scaleX(-1) scale(1.02);
}

.world-chapter--arcane:focus-within .world-chapter-art img {
  filter: saturate(1.06) contrast(1.06) brightness(0.98);
}

.world-chapter-copy h3 {
  text-shadow: 0.24rem 0.3rem 0 #000;
}

.world-chapter-copy a {
  border-block-end-width: 0.35rem;
  color: #ef3040;
}

.masters-ink-art {
  opacity: 0.46;
}

.master-list {
  gap: clamp(3rem, 7vw, 6rem);
}

.master-profile {
  border: 0;
  color: #080808;
  background: #f5f1eb;
  box-shadow: 0.85rem 0.9rem 0 #c51f2d, 0 2rem 5rem rgb(0 0 0 / 48%);
  clip-path: polygon(1% 2%, 98% 0, 100% 96%, 3% 100%);
}

.master-profile--evtsu {
  box-shadow: -0.85rem 0.9rem 0 #c51f2d, 0 2rem 5rem rgb(0 0 0 / 48%);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
}

.master-portrait {
  background: #090909;
}

.master-portrait img {
  filter: grayscale(1) contrast(1.23) brightness(0.84);
}

.master-portrait::after {
  border: 0;
  background: linear-gradient(90deg, transparent 78%, #f5f1eb 100%);
}

.master-profile--evtsu .master-portrait::after {
  background: linear-gradient(270deg, transparent 78%, #f5f1eb 100%);
}

.master-copy h3,
.master-copy > p:not(.master-role),
.master-copy blockquote {
  color: #080808;
}

.master-copy h3 {
  text-shadow: 0.18rem 0.2rem 0 rgb(197 31 45 / 34%);
}

.master-role,
.master-profile--targa .master-role,
.master-profile--evtsu .master-role {
  color: #a31320;
}

.fit-compass {
  overflow: hidden;
  background:
    linear-gradient(112deg, transparent 0 52%, rgb(197 31 45 / 18%) 52.2% 53%, transparent 53.2%),
    #030303;
}

.fit-compass-guide {
  border: 0;
  color: #080808;
  background: #f5f1eb;
  box-shadow: 0.75rem 0.8rem 0 #c51f2d;
  clip-path: polygon(1% 3%, 99% 0, 97% 98%, 0 95%);
}

.fit-compass-guide h3,
.fit-compass-guide ul {
  color: #080808;
}

.fit-compass-guide > div + div {
  border-inline-start: 3px solid #080808;
}

.fit-compass-guide li::before {
  border: 0;
  background: #c51f2d;
}

.faq-atlas {
  background:
    linear-gradient(118deg, transparent 0 27%, rgb(197 31 45 / 16%) 27.3% 28%, transparent 28.3%),
    #030303;
}

.faq-atlas .faq-list {
  padding: clamp(1rem, 3vw, 2.5rem);
  color: #080808;
  background: #f5f1eb;
  box-shadow: 0.75rem 0.8rem 0 #c51f2d;
  clip-path: polygon(1% 1%, 99% 0, 100% 98%, 0 100%);
}

.faq-atlas .faq-list details,
.faq-atlas .faq-list details:first-child {
  border-color: rgb(8 8 8 / 48%);
}

.faq-atlas .faq-list summary,
.faq-atlas .faq-answer,
.faq-atlas .faq-answer p {
  color: #080808;
}

.faq-atlas .faq-list summary::after {
  background:
    linear-gradient(#c51f2d, #c51f2d) center / 100% 3px no-repeat,
    linear-gradient(#c51f2d, #c51f2d) center / 3px 100% no-repeat;
}

.closing-portal::before {
  background:
    linear-gradient(90deg, #030303 0 38%, rgb(3 3 3 / 54%) 68%, rgb(3 3 3 / 84%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 28%), transparent 44%, #030303 100%);
}

.closing-portal-art img {
  filter: grayscale(1) contrast(1.28) brightness(0.66);
}

.closing-portal-map {
  inset: 50% auto auto 72%;
  width: min(38rem, 46vw);
  transform: translate(-50%, -50%) rotate(-6deg);
  opacity: 0.48;
}

.closing-portal-map img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.35);
  mix-blend-mode: screen;
}

@media (max-width: 68rem) {
  .hero::after {
    background:
      linear-gradient(180deg, #030303 0 36%, rgb(3 3 3 / 38%) 58%, rgb(3 3 3 / 88%) 100%),
      linear-gradient(90deg, rgb(3 3 3 / 72%), transparent 78%);
  }

  .journey-step {
    min-height: 0;
  }

  .master-portrait::after,
  .master-profile--evtsu .master-portrait::after {
    background: linear-gradient(180deg, transparent 70%, #f5f1eb 100%);
  }
}

@media (max-width: 48rem) {
  .hero::before {
    background-position: center top;
    opacity: 0.84;
  }

  .hero-copy h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.9rem);
    line-height: 1;
  }

  .world-card {
    box-shadow: 0.35rem 0.45rem 0 rgb(197 31 45 / 78%);
  }

  .pulse-map-field img {
    object-position: center top;
  }

  .pulse-event {
    padding: var(--space-5);
    color: #080808;
    background: #f5f1eb;
    box-shadow: 0.45rem 0.5rem 0 #c51f2d;
  }

  .pulse-events::before {
    width: 0.35rem;
    background: #c51f2d;
  }

  .journey-ink-art {
    opacity: 0.38;
  }

  .journey-step,
  .journey-step:first-child,
  .journey-step:nth-child(n + 3) {
    border-block-start: 3px solid #f5f1eb;
    background: rgb(0 0 0 / 82%);
  }

  .journey-step:last-child {
    padding-inline: var(--space-5);
    border-block-end: 3px solid #f5f1eb;
  }

  .world-chapter-copy h3 {
    font-size: clamp(2.3rem, 11vw, 3.6rem);
  }

  .masters-ink-art {
    opacity: 0.34;
  }

  .master-profile,
  .master-profile--evtsu {
    box-shadow: 0.42rem 0.5rem 0 #c51f2d;
  }

  .master-copy h3 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .fit-compass-guide > div + div {
    border-block-start: 3px solid #080808;
    border-inline-start: 0;
  }

  .faq-atlas .faq-list,
  .fit-compass-guide {
    box-shadow: 0.38rem 0.48rem 0 #c51f2d;
  }

  .closing-portal-map {
    inset: 67% auto auto 72%;
    width: 25rem;
    opacity: 0.36;
  }

  .closing-portal-inner,
  .closing-portal-copy,
  .closing-portal-action {
    width: 100%;
    min-width: 0;
  }

  .closing-portal-copy h2 {
    max-width: 100%;
    font-size: clamp(2.55rem, 12vw, 3.65rem);
    overflow-wrap: anywhere;
  }

  .closing-portal-copy p,
  .closing-portal .config-note {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-card img,
  .world-chapter-art img {
    transition: none;
  }
}

/* Override final: cores originais e acentos próprios dos narradores. */

.master-portrait img {
  filter: saturate(1.06) contrast(1.08) brightness(1.02);
}

.master-profile--targa .master-portrait img {
  filter: saturate(1.08) contrast(1.08) brightness(1.06);
}

.master-profile--targa {
  box-shadow: 0.85rem 0.9rem 0 #a31320, 0 2rem 5rem rgb(0 0 0 / 48%);
}

.master-profile--evtsu {
  box-shadow: -0.85rem 0.9rem 0 #245aa4, 0 2rem 5rem rgb(0 0 0 / 48%);
}

.master-profile--targa .master-role {
  color: #a31320;
}

.master-profile--evtsu .master-role {
  color: #245aa4;
}

.master-profile--targa .master-copy h3 {
  text-shadow: 0.18rem 0.2rem 0 rgb(163 19 32 / 30%);
}

.master-profile--evtsu .master-copy h3 {
  text-shadow: 0.18rem 0.2rem 0 rgb(36 90 164 / 28%);
}

.master-lead {
  color: #080808 !important;
  font-weight: 600;
}

@media (max-width: 48rem) {
  .master-profile--targa {
    box-shadow: 0.42rem 0.5rem 0 #a31320;
  }

  .master-profile--evtsu {
    box-shadow: 0.42rem 0.5rem 0 #245aa4;
  }
}

/* Pergaminhos dos narradores: fibra real, envelhecimento contido e bordas de tinta. */

.master-profile {
  position: relative;
  isolation: isolate;
  background-color: var(--color-paper-aged);
  background-image:
    radial-gradient(circle at 94% 8%, rgb(109 72 43 / 18%), transparent 25%),
    radial-gradient(circle at 8% 92%, rgb(109 72 43 / 14%), transparent 28%),
    linear-gradient(112deg, rgb(234 217 182 / 18%), rgb(109 72 43 / 8%)),
    url("../images/textures/parchment-aged.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
}

.master-copy {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(74 45 24 / 10%), transparent 14%),
    radial-gradient(ellipse at 100% 0, rgb(83 51 27 / 13%), transparent 32%),
    radial-gradient(ellipse at 12% 100%, rgb(83 51 27 / 10%), transparent 28%);
}

.master-profile--evtsu .master-copy {
  background:
    linear-gradient(270deg, rgb(74 45 24 / 10%), transparent 14%),
    radial-gradient(ellipse at 0 0, rgb(83 51 27 / 13%), transparent 32%),
    radial-gradient(ellipse at 88% 100%, rgb(83 51 27 / 10%), transparent 28%);
}

.master-portrait::after {
  background:
    linear-gradient(90deg, transparent 76%, rgb(3 3 3 / 16%) 88%, rgb(3 3 3 / 58%) 100%),
    linear-gradient(180deg, transparent 70%, rgb(3 3 3 / 24%));
}

.master-profile--evtsu .master-portrait::after {
  background:
    linear-gradient(270deg, transparent 76%, rgb(3 3 3 / 16%) 88%, rgb(3 3 3 / 58%) 100%),
    linear-gradient(180deg, transparent 70%, rgb(3 3 3 / 24%));
}

@media (min-width: 48.01rem) {
  .master-profile {
    --portrait-overlap: clamp(1.5rem, 2.5vw, 2.75rem);
  }

  .master-profile--targa .master-portrait {
    width: calc(100% + var(--portrait-overlap));
  }

  .master-profile--evtsu .master-portrait {
    width: calc(100% + var(--portrait-overlap));
    margin-inline-start: calc(-1 * var(--portrait-overlap));
  }
}

.master-copy h3,
.master-copy > p:not(.master-role),
.master-copy blockquote,
.master-lead {
  color: #19110b !important;
}

@media (max-width: 48rem) {
  .world-chapter--arcane .world-chapter-art img,
  .world-chapter--arcane:focus-within .world-chapter-art img {
    object-position: left center;
  }

  .master-copy,
  .master-profile--evtsu .master-copy {
    background:
      linear-gradient(180deg, rgb(74 45 24 / 12%), transparent 12%),
      radial-gradient(ellipse at 100% 100%, rgb(83 51 27 / 12%), transparent 34%);
  }

  .master-portrait::after,
  .master-profile--evtsu .master-portrait::after {
    background:
      linear-gradient(180deg, transparent 72%, rgb(3 3 3 / 18%) 88%, rgb(3 3 3 / 62%) 100%),
      linear-gradient(90deg, rgb(7 6 6 / 18%), transparent 18% 82%, rgb(7 6 6 / 16%));
  }

  .master-portrait {
    margin-block-end: -2.5rem;
  }

  .master-copy,
  .master-profile--evtsu .master-copy {
    padding-block-start: 6.5rem;
  }
}

/* Folhas queimadas: o alpha recorta o papel e deixa a arte do ato aparecer. */

.pulse-event,
.master-profile,
.fit-compass-guide,
.faq-atlas .faq-list {
  --parchment-sheet: url("../images/textures/parchment-burned-landscape.webp");

  border: 0;
  color: #19110b;
  background-color: color-mix(in srgb, var(--color-paper-aged) 76%, var(--color-paper-burn));
  background-image: var(--parchment-sheet);
  background-blend-mode: multiply;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0.16rem 0.22rem 0 rgb(197 31 45 / 46%)) drop-shadow(0 0.9rem 1.55rem rgb(0 0 0 / 42%));
  -webkit-mask-image: var(--parchment-sheet);
  mask-image: var(--parchment-sheet);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.pulse-event {
  padding: clamp(1.6rem, 6%, 2.6rem);
}

.master-portrait {
  z-index: 2;
  background: #080707;
}

.master-profile--targa {
  filter: drop-shadow(0.18rem 0.24rem 0 rgb(163 19 32 / 50%)) drop-shadow(0 1rem 1.7rem rgb(0 0 0 / 46%));
}

.master-profile--evtsu {
  filter: drop-shadow(-0.18rem 0.24rem 0 rgb(36 90 164 / 48%)) drop-shadow(0 1rem 1.7rem rgb(0 0 0 / 46%));
}

.fit-compass-guide {
  padding: clamp(1rem, 2vw, 1.75rem);
}

.faq-atlas .faq-list {
  padding: clamp(4.5rem, 6.5vw, 6.5rem);
}

.master-copy {
  padding: clamp(4.5rem, 8vw, 8rem);
}

@media (max-width: 48rem) {
  .master-profile,
  .fit-compass-guide,
  .faq-atlas .faq-list {
    --parchment-sheet: url("../images/textures/parchment-burned-portrait.webp");
  }

  .pulse-event {
    padding: 2rem 2.25rem;
  }

  .fit-compass-guide {
    padding: 2.25rem 1.6rem;
  }

  .fit-compass-guide > div {
    padding: var(--space-6) var(--space-4);
  }

  .faq-atlas .faq-list {
    padding: 5rem 3.5rem;
  }

  .master-copy,
  .master-profile--evtsu .master-copy {
    padding: 6.5rem 3.6rem 5.5rem;
  }
}

/* Horizonte sumi-ê: papel claro para a marca em tinta, carvão sob navegação e CTA. */

.site-header {
  background-color: #1b1814;
  background-image:
    linear-gradient(90deg, transparent 0 27%, rgb(3 3 3 / 46%) 34%, rgb(3 3 3 / 86%) 47%, rgb(3 3 3 / 96%) 100%),
    linear-gradient(180deg, rgb(255 248 231 / 5%), rgb(3 3 3 / 18%)),
    url("../images/backgrounds/header-sumie-mountains-desktop-v1.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
}

.site-header .brand-wordmark {
  filter: drop-shadow(0 0.12rem 0 rgb(255 248 231 / 52%)) drop-shadow(0 0.55rem 1rem rgb(0 0 0 / 32%));
}

.site-header .site-nav a {
  color: #f5f1eb;
  text-shadow: 0 0.1rem 0.35rem rgb(0 0 0 / 92%);
}

@media (max-width: 48rem) {
  .site-header {
    background-image:
      linear-gradient(90deg, transparent 0 66%, rgb(3 3 3 / 58%) 77%, rgb(3 3 3 / 96%) 100%),
      linear-gradient(180deg, rgb(255 248 231 / 4%), rgb(3 3 3 / 20%)),
      url("../images/backgrounds/header-sumie-mountains-mobile-v1.webp");
    background-position: center;
  }
}

/* Experimento reversível: avatares recortados como ilustrações sobre o papel. */

.master-atlas--embedded-cutout .master-profile {
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
}

.master-atlas--embedded-cutout .master-profile--targa,
.master-atlas--embedded-cutout .master-profile--evtsu {
  filter: drop-shadow(0.14rem 0.2rem 0 rgb(72 43 25 / 46%)) drop-shadow(0 1rem 1.7rem rgb(0 0 0 / 46%));
}

.master-atlas--embedded-cutout .master-portrait {
  align-self: stretch;
  width: calc(100% + clamp(1.5rem, 2.5vw, 2.75rem));
  margin: 0;
  overflow: visible;
  background: transparent;
}

.master-atlas--embedded-cutout .master-profile--evtsu .master-portrait {
  width: calc(100% + clamp(1.5rem, 2.5vw, 2.75rem));
  margin-inline-start: calc(-1 * clamp(1.5rem, 2.5vw, 2.75rem));
}

.master-atlas--embedded-cutout .master-portrait::after {
  display: none;
}

.master-atlas--embedded-cutout .master-portrait img,
.master-atlas--embedded-cutout .master-profile--targa .master-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(0.76) contrast(1.05) brightness(0.98) drop-shadow(0 0.9rem 0.75rem rgb(53 31 20 / 30%));
  mix-blend-mode: multiply;
  transform: scale(1.055);
  transform-origin: center bottom;
}

.master-atlas--embedded-cutout .master-copy,
.master-atlas--embedded-cutout .master-profile--evtsu .master-copy {
  z-index: 3;
  background: transparent;
}

@media (max-width: 48rem) {
  .master-atlas--embedded-cutout .master-profile {
    grid-template-columns: 1fr;
  }

  .master-atlas--embedded-cutout .master-portrait,
  .master-atlas--embedded-cutout .master-profile--evtsu .master-portrait {
    width: 100%;
    margin-inline-start: 0;
    margin-block-end: -3.5rem;
    aspect-ratio: 4 / 4.65;
  }

  .master-atlas--embedded-cutout .master-portrait img,
  .master-atlas--embedded-cutout .master-profile--targa .master-portrait img {
    transform: scale(1.035);
  }

  .master-atlas--embedded-cutout .master-copy,
  .master-atlas--embedded-cutout .master-profile--evtsu .master-copy {
    padding-block-start: 5.5rem;
  }
}

@media (forced-colors: active) {
  .pulse-event,
  .master-profile,
  .fit-compass-guide,
  .faq-atlas .faq-list {
    color: CanvasText;
    background: Canvas;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .site-header {
    background: Canvas;
  }
}

/* Etapa 5C — retoque final de overlays: legibilidade sobre arte e coerência entre seções. */

/* O selo do portal final tinha o mesmo z-index do véu e vinha depois no DOM,
   ou seja: era pintado ACIMA do scrim, clareando justamente a coluna do CTA. */
.closing-portal-map {
  z-index: -2;
}

@media (min-width: 48.01rem) {
  /* Pulso: o campo cartográfico abria em vermelho sob o parágrafo de apoio. */
  .pulse-map::after {
    background:
      radial-gradient(76% 54% at 79% 24%, rgb(3 3 3 / 74%), transparent 72%),
      linear-gradient(180deg, #030303 0, rgb(3 3 3 / 38%) 20%, rgb(3 3 3 / 66%) 100%);
  }

  /* Jornada: mesma correção sob o parágrafo do cabeçalho. */
  .journey::after {
    background:
      radial-gradient(58% 50% at 84% 33%, rgb(0 0 0 / 76%), transparent 76%),
      linear-gradient(180deg, rgb(0 0 0 / 36%), rgb(0 0 0 / 74%));
  }

  /* Portal final: poça de sombra localizada sob o CTA e a nota, sem apagar o selo. */
  .closing-portal::before {
    background:
      radial-gradient(46% 40% at 79% 82%, rgb(3 3 3 / 82%), transparent 74%),
      linear-gradient(90deg, #030303 0 38%, rgb(3 3 3 / 54%) 66%, rgb(3 3 3 / 84%) 100%),
      linear-gradient(180deg, rgb(0 0 0 / 28%), transparent 44%, #030303 100%);
  }

  /* Agora que o selo está sob o véu, ele precisa de mais presença para continuar lendo. */
  .closing-portal-map {
    opacity: 0.95;
  }
}

@media (max-width: 48rem) {
  .closing-portal::before {
    background: linear-gradient(180deg, rgb(3 3 3 / 92%) 0, rgb(3 3 3 / 76%) 46%, rgb(3 3 3 / 97%) 100%);
  }
}

/* Capítulos dos mundos: as três artes precisam ler como um sistema.
   Antes: 0.78 / 0.94 / 0.78 — três exposições diferentes.
   Agora: 0.84 / 0.94 / 0.88, com o piso de 0.9 do capítulo arcano preservado
   (tests/site.spec.cjs exige que o personagem continue iluminado no lado livre). */
.world-chapter--ninja .world-chapter-art img,
.world-chapter--ninja:focus-within .world-chapter-art img {
  filter: saturate(0.94) contrast(1.1) brightness(0.84);
}

.world-chapter--ninja:focus-within .world-chapter-art img {
  filter: saturate(1.02) contrast(1.08) brightness(0.9);
}

.world-chapter--occult .world-chapter-art img,
.world-chapter--occult:focus-within .world-chapter-art img {
  filter: saturate(0.94) contrast(1.08) brightness(0.88);
}

.world-chapter--occult:focus-within .world-chapter-art img {
  filter: saturate(1) contrast(1.06) brightness(0.94);
}

/* ── Estado de espera dos destinos externos ───────────────────────────────
   O rótulo continua dizendo qual é a ação, para o visitante saber onde vai
   clicar; a aparência é que diz que ela ainda não está disponível.
   Vale para os três destinos (Discord, WhatsApp e mesa de jogo).           */

.button[data-discord-state="pending"],
.button[data-whatsapp-state="pending"],
.button[data-foundry-state="pending"] {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background: rgb(18 14 14 / 82%);
  box-shadow: none;
  cursor: default;
}

.button[data-discord-state="pending"]::before,
.button[data-whatsapp-state="pending"]::before,
.button[data-foundry-state="pending"]::before {
  content: "";
  flex: none;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  margin-inline-end: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent-solid);
  opacity: 0.55;
}

@media (hover: hover) {
  .button[data-discord-state="pending"]:hover,
  .button[data-whatsapp-state="pending"]:hover,
  .button[data-foundry-state="pending"]:hover,
  .button--primary[data-discord-state="pending"]:hover,
  .button--primary[data-whatsapp-state="pending"]:hover,
  .button--primary[data-foundry-state="pending"]:hover {
    border-color: var(--color-border-subtle);
    background: rgb(18 14 14 / 82%);
    cursor: default;
  }
}

/* Porta principal do /entrar: a ação tem que ser inconfundível. */
.button--door {
  min-height: 3.75rem;
  padding-inline: 2rem;
  font-size: 0.95rem;
}

/* ── Correção: o botão vermelho tinha perdido a profundidade ──────────────
   `.button` usa clip-path para o corte de pincel, e clip-path recorta
   também o box-shadow — o "papel" marfim atrás do botão simplesmente não
   era desenhado. `filter: drop-shadow` acompanha a silhueta recortada e
   devolve a sombra que a identidade pede.                                 */

.button--primary {
  box-shadow: none;
  filter: drop-shadow(0.4rem 0.4rem 0 rgb(245 241 235 / 90%));
}

.button--primary[data-discord-state="pending"],
.button--primary[data-whatsapp-state="pending"],
.button--primary[data-foundry-state="pending"] {
  filter: none;
}

/* A porta principal do /entrar carrega a página inteira: mais peso, mais ar. */
.button--door {
  min-height: 4rem;
  padding-inline: 2.4rem;
  border-width: 2px;
  font-size: 1rem;
  letter-spacing: 0.09em;
}

@media (hover: hover) {
  .button--primary:not([data-discord-state="pending"]):not([data-whatsapp-state="pending"]):not([data-foundry-state="pending"]):hover {
    filter: drop-shadow(0.2rem 0.2rem 0 rgb(245 241 235 / 90%));
  }
}