body[data-page="topics"]:not(.is-topic-reading) {
  --ring-card-width: 360px;
  --ring-card-height: clamp(515px, calc(100svh - 242px), 660px);
  --ring-card-step: .52;
  --ring-card-slot: calc(var(--ring-card-width) * var(--ring-card-step));
  --ring-card-tilt: 1;
}
body[data-page="topics"]:not(.is-topic-reading) .page-masthead {
  padding: 12px 20px 0;
  border: 0;
}
body[data-page="topics"]:not(.is-topic-reading) .masthead-intro {
  width: 100%;
}
body[data-page="topics"]:not(.is-topic-reading) .page-masthead .room-label {
  font-size: 12px;
  margin: 0 0 3px;
}
body[data-page="topics"]:not(.is-topic-reading) .masthead-title-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page="topics"]:not(.is-topic-reading) .masthead-heading {
  height: 60px;
  min-height: 0;
  margin: 0 auto;
}
body[data-page="topics"]:not(.is-topic-reading) .masthead-bow,
body[data-page="topics"]:not(.is-topic-reading) .masthead-intro > p:not(.room-label),
#topicDirectory .people-directory-tools,
#topicIndex {
  display: none !important;
}
body[data-page="topics"]:not(.is-topic-reading) .topic-room {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 8px;
}
body[data-page="topics"]:not(.is-topic-reading) .site-portrait-photo {
  opacity: .20;
}
.topic-ring {
  outline: 0;
  width: 100%;
}
.topic-ring-stage {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
}
.topic-ring-viewport {
  overflow: hidden;
  padding: 20px 0 28px;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.topic-ring-viewport:active { cursor: grabbing; }
.topic-ring-viewport:active .topic-photo-card { cursor: grabbing; }
.topic-ring-track {
  display: flex;
  align-items: flex-start;
  height: var(--ring-card-height);
  touch-action: pan-y pinch-zoom;
}
.topic-ring-slide {
  flex: 0 0 var(--ring-card-slot);
  min-width: 0;
  position: relative;
  height: var(--ring-card-height);
  visibility: hidden;
}
.topic-ring-slide.is-in-ring .topic-photo-card { will-change: transform, opacity; }
.topic-photo-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto;
  width: var(--ring-card-width);
  height: var(--ring-card-height);
  margin-left: calc((var(--ring-card-slot) - var(--ring-card-width)) / 2);
  padding: 13px 14px 20px;
  transform-origin: center;
  contain: layout style;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.topic-photo-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 26px solid transparent;
  border-image: url("../note-paper/note-paper.webp") 108 fill / 26px stretch;
  pointer-events: none;
  filter: drop-shadow(5px 15px 13px rgb(61 41 34 / .13));
}
.topic-photo-window {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #e8e2e0;
}
.topic-photo-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.topic-photo-window .topic-photo-monochrome { display: none; }
.topic-photo-source {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 10px;
  color: #643d37;
  background: #faf7f3;
  font-size: 11px;
  line-height: 1.5;
}
.topic-photo-copy {
  padding: 17px 15px 0;
  min-width: 0;
}
.topic-photo-number {
  margin: 0 0 5px;
  color: var(--primary-deep);
  font-size: 12px;
  line-height: 1.6;
}
.topic-photo-card h2 {
  margin: 0;
  min-height: 65px;
  font-family: var(--font-hand-ui);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}
.topic-photo-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 23px;
  margin: 4px 0 5px;
  color: var(--primary);
}
.topic-photo-divider::before,
.topic-photo-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #cda59e;
}
.topic-photo-divider .bow-mark { width: 24px; height: 19px; flex: 0 0 24px; }
.topic-photo-summary {
  margin: 0;
  min-height: 79px;
  font-family: var(--font-cjk-readable);
  color: #65514c;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
}
.topic-photo-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin-top: 9px;
  padding: 7px 0 0;
  color: #7d423a;
  border-top: 1px solid #d4bcb5;
  text-decoration: none;
  font-size: 15px;
  font-family: var(--font-hand-ui);
}
.topic-photo-open svg { width: 19px; height: 19px; flex: 0 0 19px; }
.topic-photo-open:hover { color: #a95146; }
.topic-photo-open:focus-visible,
.topic-ring:focus-visible .is-selected .topic-photo-open { outline: 2px solid var(--primary); outline-offset: 4px; }
.topic-ring-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(calc(100% - 40px), 760px);
  min-height: 44px;
  margin: -16px auto 0;
  position: relative;
}
.topic-ring-turn {
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 44px;
  padding: 10px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #885149;
  font: 14px/1.5 var(--font-hand-ui);
  letter-spacing: 0;
  cursor: pointer;
  transition: color 140ms ease;
}
.topic-ring-turn--prev { justify-self: start; }
.topic-ring-turn--next { justify-self: end; }
.topic-ring-turn:hover { color: #60382f; text-decoration: underline; text-underline-offset: 5px; }
.topic-ring-turn:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; }
.topic-ring-position {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  height: 30px;
  margin: 0;
  color: #82655d;
  font: 15px/1.3 var(--font-cjk-readable);
  font-variant-numeric: tabular-nums;
}
.topic-ring-current { color: #7d423a; font-size: 22px; min-width: 29px; text-align: center; }
.topic-ring-position-rule { width: 44px; height: 1px; background: #b69288; }

@media (max-width: 1059.98px) {
  body[data-page="topics"]:not(.is-topic-reading) { --ring-card-width: 336px; }
}
@media (min-width: 1440px) {
  body[data-page="topics"]:not(.is-topic-reading) { --ring-card-step: .59; }
}
@media (max-width: 850px) {
  body[data-page="topics"]:not(.is-topic-reading) {
    --ring-card-step: .8;
    --ring-card-tilt: .15;
  }
  .topic-photo-card::before { filter: none; }
  .topic-photo-window .topic-photo-monochrome {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: grayscale(1);
    opacity: 1;
    transition: opacity 160ms ease-out;
  }
  .is-selected .topic-photo-monochrome { opacity: 0; }
}
@media (max-width: 600px) {
  body[data-page="topics"]:not(.is-topic-reading) {
    --ring-card-width: min(306px, calc(100vw - 72px));
    --ring-card-height: clamp(546px, calc(100svh - 205px), 630px);
  }
  body[data-page="topics"]:not(.is-topic-reading) .page-masthead { padding-top: 9px; }
  body[data-page="topics"]:not(.is-topic-reading) .masthead-heading { height: 47px; }
  .topic-ring-viewport { padding-top: 17px; padding-bottom: 30px; }
  .topic-photo-card { padding: 11px 11px 17px; grid-template-rows: minmax(185px,1fr) auto; }
  .topic-photo-copy { padding: 13px 8px 0; }
  .topic-photo-card h2 { font-size: 21px; min-height: 58px; }
  .topic-photo-summary { font-size: 15px; line-height: 1.6; min-height: 72px; }
  .topic-photo-open { font-size: 15px; min-height: 40px; margin-top: 5px; }
  .topic-photo-divider { margin: 3px 0; }
  .topic-ring-turn { min-width: 60px; font-size: 13px; }
}
@media (max-width: 350px) {
  body[data-page="topics"]:not(.is-topic-reading) { --ring-card-height: 560px; }
  .topic-photo-card h2 { font-size: 20px; min-height: 81px; }
  .topic-photo-summary { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-ring-turn,
  .topic-photo-window .topic-photo-monochrome { transition: none; }
}