/* Match catalog surface (sketches shell tokens). */
html.studies-active,
html.studies-active body {
  background-color: #dbdbdb;
  color: #050505;
}

html.studies-active .studies-lists__contents-ul .title-suffix {
  font-family: PP Neue Montreal Book, system-ui, sans-serif;
  color: #565656;
}

html.studies-active .studies-head__intro {
  grid-column: 1 / -1;
  margin-bottom: 28rem;
  max-width: 920rem;
}

html.studies-active .studies-head__intro-text {
  margin: 0 0 14rem;
  font-family: PP Neue Montreal Book, system-ui, sans-serif;
  font-size: 12rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: #050505;
}

html.studies-active .studies-head__intro-text:last-child {
  margin-bottom: 0;
}

html.studies-active .studies-head__read .studies-head__read-text {
  margin-top: 8rem;
}

/* Extra scroll runway so list / header motion can play through (~1.5 viewports). */
html.studies-active .studies {
  padding-bottom: 200vh;
}

@view-transition {
  navigation: auto;
}

/* Motion fallback (sketches shell only). */
html.studies-active .word,
html.studies-active .char,
html.studies-active .studies-head__text-inner,
html.studies-active .header span,
html.studies-active .studies-lists__head-text {
  transform: translateY(0) !important;
}

/* Desktop: one sticky column head (matches tomoyaokada.com). */
@media (min-width: 768px) {
  html.studies-active .studies-lists__head {
    top: min(28vh, 400px);
  }
}

@media (max-width: 767px) {
  html.studies-active,
  html.studies-active body {
    overflow-x: clip;
    max-width: 100%;
  }

  html.studies-active .header__inner {
    row-gap: 8px;
  }

  html.studies-active .header__about {
    font-size: 11rem;
  }

  html.studies-active .studies-head {
    padding-top: 56rem;
    margin-bottom: 40rem;
  }

  html.studies-active .studies-head__read {
    grid-column: 1 / -1;
  }

  html.studies-active .studies-head__intro {
    margin-bottom: 20rem;
    max-width: none;
  }

  html.studies-active .studies-head__intro-text {
    font-size: 11rem;
    line-height: 1.35;
    margin-bottom: 12rem;
  }

  html.studies-active .studies-head__read-text {
    font-size: 11rem;
    line-height: 1.35;
  }

  html.studies-active .studies-lists__contents {
    margin-top: 12px;
    padding-bottom: 12px;
  }

  /* Stack year label above rows (Tomoya uses column contents wrapper). */
  html.studies-active .studies-lists__contents-ul {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  html.studies-active .studies-lists__contents-ul .year {
    min-width: 0;
    width: 100%;
    top: 0;
    margin-bottom: 8px;
    font-size: 11rem;
  }

  html.studies-active .studies-lists__contents-ul .contents {
    width: 100%;
  }

  html.studies-active .studies-lists__contents-ul .list-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-block: 14px 18px;
  }

  html.studies-active .studies-lists__contents-ul .id {
    min-width: 0;
    padding-left: 0;
    font-size: 10rem;
    opacity: 0.55;
  }

  html.studies-active .studies-lists__contents-ul .title {
    min-width: 0;
    width: 100%;
    font-size: 14rem;
    line-height: 1.1;
  }

  html.studies-active .studies-lists__contents-ul .title .title-inner {
    text-shadow: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html.studies-active .studies-lists__contents-ul .field {
    display: block;
    min-width: 0;
    width: 100%;
    text-align: left;
    font-size: 10rem;
    opacity: 0.7;
  }

  html.studies-active .studies-block {
    height: auto;
    min-height: 40svh;
    padding-block: 48px;
  }

  html.studies-active .studies-block p {
    grid-column: 1 / -1;
    font-size: 11rem;
    line-height: 1.35;
  }

  html.studies-active .loading {
    display: none !important;
  }
}