.board-message-page.v4-page {
  --board-header-height: 80px;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--v4-bg);
}

.board-message-menu-link {
  cursor: pointer;
  text-decoration: none;
}

.board-message-menu-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(24, 77, 152, 0.24);
  outline-offset: 5px;
}

.board-message-main {
  width: 100%;
  height: calc(100dvh - var(--board-header-height));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(540px, 42vw) minmax(0, 1fr);
  overflow: hidden;
  background: var(--v4-bg);
}

.board-message-portrait {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.board-message-portrait img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  max-width: 98%;
  height: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}

.board-message-scroll {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(24, 77, 152, 0.28) transparent;
}

.board-message-scroll:focus-visible {
  outline: 3px solid rgba(233, 78, 15, 0.34);
  outline-offset: -3px;
}

.board-message-scroll::-webkit-scrollbar {
  width: 8px;
}

.board-message-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(24, 77, 152, 0.28);
  background-clip: padding-box;
}

.board-message-article {
  width: min(100%, 980px);
  padding: clamp(74px, 8vh, 108px) clamp(64px, 6vw, 116px) 112px clamp(42px, 4vw, 76px);
}

.board-message__title {
  max-width: 820px;
  margin: 0;
  color: var(--v4-blue);
  font-family: var(--font-report-display);
  font-size: clamp(46px, 3.15vw, 60px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.board-message__lead {
  max-width: 820px;
  margin: clamp(54px, 6vh, 78px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}

.board-message__quote-mark {
  width: 62px;
  height: auto;
  margin-top: 5px;
  display: block;
}

.board-message__lead p {
  margin: 0;
  color: var(--v4-ink);
  font-family: var(--font-report-body);
  font-size: clamp(22px, 1.42vw, 27px);
  font-weight: 400;
  line-height: 1.45;
}

.board-message__greeting {
  margin: clamp(52px, 6vh, 76px) 0 26px;
  color: var(--v4-blue);
  font-family: var(--font-report-display);
  font-size: clamp(24px, 1.55vw, 29px);
  font-weight: 700;
  line-height: 1.15;
}

.board-message__body {
  max-width: 820px;
}

.board-message__body p {
  margin: 0 0 1.15em;
  color: var(--v4-ink);
  font-family: var(--font-report-body);
  font-size: clamp(15.5px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1.55;
}

.board-message__signature {
  max-width: 820px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid rgba(24, 77, 152, 0.2);
  color: var(--v4-ink);
  font-family: var(--font-report-body);
  font-size: 16px;
  line-height: 1.45;
}

.board-message__signature strong {
  margin-bottom: 12px;
  display: block;
  color: var(--v4-blue);
  font-family: var(--font-report-body);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  white-space: pre-line;
}

/*
 * Shared opening editorial scene. The portrait is deliberately static from
 * first paint; title, lead, greeting and the complete body follow in order.
 */

.board-message-page--intro-motion .board-message__title {
  animation: board-title-enter 780ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.board-message-page--intro-motion .board-message__quote-mark {
  transform-origin: center center;
  animation: board-quote-mark-enter 680ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both;
}

.board-message-page--intro-motion .board-message__lead p {
  animation: board-lead-drift 1050ms cubic-bezier(0.16, 1, 0.3, 1) 650ms both;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key] {
  animation: board-lead-fragment-enter 720ms ease-out both;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key]:nth-child(1) {
  animation-delay: 760ms;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key]:nth-child(2) {
  animation-delay: 850ms;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key]:nth-child(3) {
  animation-delay: 940ms;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key]:nth-child(4) {
  animation-delay: 1030ms;
}

.board-message-page--intro-motion .board-message__lead p > [data-source-key]:nth-child(5) {
  animation-delay: 1120ms;
}

.board-message-page--intro-motion .board-message__greeting {
  animation: board-greeting-enter 680ms cubic-bezier(0.16, 1, 0.3, 1) 1480ms both;
}

.board-message-page--intro-motion .board-message__body > p {
  animation: board-body-enter 940ms cubic-bezier(0.16, 1, 0.3, 1) 2120ms both;
}

@keyframes board-title-enter {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes board-quote-mark-enter {
  from {
    opacity: 0;
    transform: translate3d(-8px, 3px, 0) rotate(-5deg) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes board-lead-drift {
  from {
    filter: blur(5px);
    transform: translate3d(18px, 0, 0);
  }

  to {
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes board-lead-fragment-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes board-greeting-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes board-body-enter {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 86rem) {
  .board-message-main {
    grid-template-columns: minmax(430px, 40vw) minmax(0, 1fr);
  }

  .board-message-article {
    padding: 62px clamp(42px, 4.5vw, 72px) 96px clamp(34px, 3.8vw, 58px);
  }

  .board-message__title {
    font-size: clamp(40px, 3.55vw, 50px);
  }

  .board-message__lead {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 22px;
  }

  .board-message__quote-mark {
    width: 52px;
  }

  .board-message__lead p {
    font-size: clamp(19px, 1.65vw, 23px);
  }

  .board-message__body p {
    font-size: clamp(15px, 1.16vw, 16.5px);
  }
}

@media (max-width: 68.75rem) {
  .board-message-page.v4-page {
    --board-header-height: 72px;
  }

  .board-message-main {
    grid-template-columns: minmax(350px, 38vw) minmax(0, 1fr);
  }

  .board-message-article {
    padding: 52px 36px 88px 32px;
  }

  .board-message__title {
    font-size: clamp(34px, 4.2vw, 44px);
  }

  .board-message__lead {
    margin-top: 42px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
  }

  .board-message__quote-mark {
    width: 44px;
  }

  .board-message__lead p {
    font-size: clamp(18px, 2vw, 21px);
  }
}

@media (max-width: 50rem) {
  .board-message-page.v4-page {
    --board-header-height: 68px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .board-message-main {
    height: auto;
    min-height: calc(100dvh - var(--board-header-height));
    display: block;
    overflow: visible;
  }

  .board-message-portrait {
    width: 100%;
    height: clamp(520px, 112vw, 740px);
  }

  .board-message-portrait img {
    max-width: 100%;
  }

  .board-message-scroll {
    height: auto;
    overflow: visible;
  }

  .board-message-article {
    width: 100%;
    padding: 52px clamp(24px, 7vw, 54px) 80px;
  }

  .board-message__title {
    font-size: clamp(34px, 8vw, 48px);
  }

  .board-message__lead {
    max-width: none;
    margin-top: 40px;
  }

  .board-message__lead p {
    font-size: clamp(19px, 4.4vw, 24px);
  }

  .board-message__body,
  .board-message__signature {
    max-width: none;
  }

  .board-message__body p {
    font-size: clamp(16px, 3.8vw, 18px);
  }
}

@media (max-width: 30rem) {
  .board-message-portrait {
    height: clamp(470px, 128vw, 610px);
  }

  .board-message-article {
    padding-right: 20px;
    padding-left: 20px;
  }

  .board-message__title {
    font-size: clamp(32px, 9.4vw, 42px);
  }

  .board-message__lead {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 15px;
  }

  .board-message__quote-mark {
    width: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-message-page--intro-motion .board-message__title,
  .board-message-page--intro-motion .board-message__quote-mark,
  .board-message-page--intro-motion .board-message__lead p,
  .board-message-page--intro-motion .board-message__lead p > [data-source-key],
  .board-message-page--intro-motion .board-message__greeting,
  .board-message-page--intro-motion .board-message__body > p {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .board-message-scroll {
    scroll-behavior: auto;
  }
}

.report-page-nav {
  position: fixed;
  z-index: 8;
  top: calc(var(--board-header-height, 80px) + (100dvh - var(--board-header-height, 80px)) / 2);
  right: clamp(20px, 2vw, 38px);
  width: clamp(284px, 17.2vw, 330px);
  display: grid;
  gap: 18px;
  transform: translateY(-50%);
}

.report-page-nav__item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.report-page-nav__card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 14px 16px 13px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: rgba(249, 251, 255, 0.92);
  box-shadow: 0 11px 28px rgba(57, 75, 99, 0.12), 0 2px 7px rgba(57, 75, 99, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.report-page-nav__card::before {
  content: "";
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 13px;
  width: 3px;
  border-radius: 999px;
  background: var(--v4-orange);
}

.report-page-nav__direction {
  margin-bottom: 5px;
  overflow: hidden;
  color: rgba(60, 60, 59, 0.56);
  font-family: var(--font-report-display);
  font-size: clamp(8.5px, 0.53vw, 10px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-page-nav__title {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--v4-blue);
  font-family: var(--font-report-display);
  font-size: clamp(12px, 0.76vw, 14.5px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.report-page-nav__arrow {
  width: 70px;
  height: 70px;
  display: block;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.report-page-nav__arrow--previous {
  opacity: 1;
  filter: drop-shadow(0 7px 9px rgba(232, 77, 14, 0.18));
  transform: rotate(180deg);
}

.report-page-nav__item--previous .report-page-nav__card {
  border-color: rgba(255, 255, 255, 0.96);
  background: #fff;
  box-shadow: 0 15px 34px rgba(57, 75, 99, 0.17), 0 3px 9px rgba(57, 75, 99, 0.1);
}

.report-page-nav__item--previous .report-page-nav__card::before {
  background: var(--v4-orange);
}

.report-page-nav__item--previous .report-page-nav__direction {
  color: rgba(60, 60, 59, 0.56);
}

.report-page-nav__item--previous .report-page-nav__title {
  color: var(--v4-blue);
}

.report-page-nav__item--previous:hover .report-page-nav__card,
.report-page-nav__item--previous:focus-visible .report-page-nav__card {
  background: #fff;
  box-shadow: 0 19px 42px rgba(57, 75, 99, 0.22), 0 4px 11px rgba(57, 75, 99, 0.12);
}

.report-page-nav__item--previous:hover .report-page-nav__arrow--previous,
.report-page-nav__item--previous:focus-visible .report-page-nav__arrow--previous {
  opacity: 1;
  filter: drop-shadow(0 6px 8px rgba(232, 77, 14, 0.14));
  transform: rotate(180deg);
}

.report-page-nav__item--previous:focus-visible {
  border-radius: 12px;
  outline: 3px solid rgba(24, 77, 152, 0.28);
  outline-offset: 5px;
}

.report-page-nav__item--next {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.report-page-nav__item--next .report-page-nav__card {
  border-color: rgba(255, 255, 255, 0.96);
  background: #fff;
  box-shadow: 0 15px 34px rgba(57, 75, 99, 0.17), 0 3px 9px rgba(57, 75, 99, 0.1);
}

.report-page-nav__item--next .report-page-nav__arrow {
  animation: report-page-nav-forward-hint 2.4s ease-in-out infinite;
  filter: drop-shadow(0 7px 9px rgba(232, 77, 14, 0.18));
}

.report-page-nav__item--next:hover .report-page-nav__card,
.report-page-nav__item--next:focus-visible .report-page-nav__card {
  box-shadow: 0 19px 42px rgba(57, 75, 99, 0.22), 0 4px 11px rgba(57, 75, 99, 0.12);
}

.report-page-nav__item--next:hover .report-page-nav__arrow,
.report-page-nav__item--next:focus-visible .report-page-nav__arrow {
  animation-play-state: paused;
  filter: drop-shadow(0 10px 12px rgba(232, 77, 14, 0.25));
}

.report-page-nav__item--next:active .report-page-nav__card {
  transform: translateX(2px) scale(0.985);
}

.report-page-nav__item--next:focus-visible {
  border-radius: 12px;
  outline: 3px solid rgba(232, 77, 14, 0.26);
  outline-offset: 5px;
}

@keyframes report-page-nav-forward-hint {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}

@media (min-width: 40.0625rem) {
  .report-page-nav {
    pointer-events: none;
  }

  .report-page-nav__arrow {
    pointer-events: auto;
  }

  .report-page-nav__card {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(28px, 0, 0);
    transition:
      opacity 300ms ease,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 420ms,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  .report-page-nav__item:hover,
  .report-page-nav__item:focus-within {
    pointer-events: auto;
  }

  .report-page-nav__item:hover .report-page-nav__card,
  .report-page-nav__item:focus-within .report-page-nav__card {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 340ms ease 40ms,
      transform 440ms cubic-bezier(0.16, 1, 0.3, 1) 40ms,
      visibility 0s linear 0s,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  .report-page-nav__item--previous .report-page-nav__card,
  .report-page-nav__item--next .report-page-nav__card {
    border-color: rgba(255, 255, 255, 0.96);
    background: #fff;
    box-shadow: 0 15px 34px rgba(57, 75, 99, 0.17), 0 3px 9px rgba(57, 75, 99, 0.1);
  }

  .report-page-nav__item--previous .report-page-nav__card::before {
    background: var(--v4-orange);
  }

  .report-page-nav__item--previous .report-page-nav__direction {
    color: rgba(60, 60, 59, 0.56);
  }

  .report-page-nav__item--previous .report-page-nav__title {
    color: var(--v4-blue);
  }

  .report-page-nav__item--previous .report-page-nav__arrow--previous {
    opacity: 1;
    filter: drop-shadow(0 7px 9px rgba(232, 77, 14, 0.18));
  }

}

@media (min-width: 90.0625rem) {
  .board-message-article {
    width: 100%;
    max-width: none;
    padding-right: clamp(340px, 20vw, 392px);
  }

  .board-message__title,
  .board-message__lead,
  .board-message__body,
  .board-message__signature {
    max-width: 720px;
  }
}

@media (min-width: 40.0625rem) and (max-width: 90rem) {
  .report-page-nav {
    right: 14px;
    width: clamp(250px, 32vw, 284px);
    gap: 12px;
  }

  .report-page-nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 12px;
  }

  .report-page-nav__arrow {
    width: 56px;
    height: 56px;
  }

  .board-message-article {
    padding-right: max(82px, 5vw);
  }
}

@media (max-width: 40rem) {
  .report-page-nav {
    top: auto;
    right: 12px;
    bottom: 14px;
    width: 48px;
    gap: 10px;
    transform: none;
  }

  .report-page-nav__item {
    display: block;
  }

  .report-page-nav__card {
    display: none;
  }

  .report-page-nav__arrow {
    width: 48px;
    height: 48px;
  }

  .board-message-article {
    padding-right: max(72px, 10vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-page-nav__card,
  .report-page-nav__arrow {
    animation: none;
    transition: none;
  }
}
