:root {
  --male-ink: #241b18;
  --male-muted: #5f514b;
  --male-line: rgba(74, 51, 43, 0.14);
  --male-paper: #fbf7f0;
  --male-paper-deep: #f1e8dc;
  --male-night: #171210;
  --male-night-soft: #2c211d;
  --male-copper: #b96f4c;
  --male-copper-soft: #dda17c;
  --male-moss: #7f8d6c;
}

body.male-course-overlay-open {
  overflow: hidden;
}

.male-course-experience-page .course-center-main,
.male-course-reader-page .course-center-main {
  min-width: 0;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(208, 161, 124, 0.09), transparent 28%),
    linear-gradient(180deg, #f6f0e7 0%, #eee5da 100%);
}

.male-course-experience,
.male-course-reader {
  width: min(100%, 1460px);
  margin: 0 auto;
  color: var(--male-ink);
}

.male-course-experience button,
.male-course-reader button {
  font: inherit;
}

.male-course-experience :where(button, summary, a):focus-visible,
.male-course-reader :where(button, summary, a):focus-visible {
  outline: 2px solid rgba(221, 161, 124, 0.92);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(185, 111, 76, 0.16);
}

.male-course-experience,
.male-course-reader,
.male-course-overlay-panel {
  scrollbar-color: rgba(185, 111, 76, 0.54) transparent;
  scrollbar-width: thin;
}

.male-course-scene {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px 30px 12px 12px;
  color: #fff9f1;
  background:
    radial-gradient(circle at 72% 16%, rgba(185, 111, 76, 0.16), transparent 30%),
    linear-gradient(120deg, #171210 0%, #251915 58%, #1a1311 100%);
  box-shadow: 0 26px 70px rgba(44, 27, 20, 0.24);
}

.male-course-scene::before,
.male-course-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.male-course-scene::before {
  inset: 0;
  opacity: 0.24;
  background:
    linear-gradient(112deg, transparent 0 62%, rgba(255,255,255,0.09) 62.15%, transparent 62.5%),
    repeating-linear-gradient(106deg, transparent 0 70px, rgba(255,255,255,0.025) 71px, transparent 72px);
}

.male-course-scene::after {
  inset: auto 6.5% 36px;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);
}

.male-course-scene-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(255,255,255,0.11);
  color: rgba(255,249,241,0.84);
}

.male-course-scene-topbar span {
  font-size: 13px;
  letter-spacing: 0.18em;
}

.male-course-scene-topbar button {
  width: fit-content;
  padding: 7px 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.male-course-scene-topbar button:last-child {
  justify-self: end;
}

.male-course-scene-topbar button:hover {
  color: #fff;
}

.male-course-scene-copy {
  width: min(900px, 82%);
  padding: 58px 6.5% 56px;
}

.male-course-scene-copy > small {
  color: var(--male-copper-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.male-course-scene-copy h1 {
  max-width: 720px;
  margin: 20px 0 18px;
  color: #fffaf3;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(50px, 5.4vw, 78px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.male-course-scene-copy h1 span {
  display: block;
}

.male-course-scene-copy > p {
  max-width: 620px;
  margin: 0;
  color: rgba(255,249,241,0.86);
  font-size: 18px;
  line-height: 1.9;
}

.male-course-scene-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
}

.male-course-scene-actions button {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  color: #211713;
  font-weight: 700;
  background: #fff8ef;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.male-course-scene-actions button:hover {
  transform: translateY(-2px);
  background: #fff;
}

.male-course-scene-actions span {
  color: rgba(255,249,241,0.76);
  font-size: 14px;
}

.male-course-question-lane {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  margin: -2px 24px 0;
  padding: 19px 22px;
  border: 1px solid rgba(255,255,255,0.58);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: rgba(253,249,243,0.9);
  box-shadow: 0 18px 46px rgba(74,51,43,0.09);
  backdrop-filter: blur(18px);
}

.male-course-question-lane > div small,
.male-course-question-lane > div strong {
  display: block;
}

.male-course-question-lane > div small {
  margin-bottom: 4px;
  color: var(--male-copper);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.male-course-question-lane > div strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 22px;
}

.male-course-question-lane nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--male-line);
}

.male-course-question-lane nav button {
  min-width: 0;
  padding: 13px 15px;
  border: 0;
  color: var(--male-ink);
  text-align: left;
  background: #fffdf9;
  cursor: pointer;
}

.male-course-question-lane nav button:hover {
  background: #f4e8dc;
}

.male-course-question-lane nav span,
.male-course-question-lane nav small {
  display: block;
}

.male-course-question-lane nav span {
  color: #2d211d;
  font-size: 16px;
  font-weight: 700;
}

.male-course-question-lane nav small {
  margin-top: 3px;
  overflow: hidden;
  color: #6c5d56;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.male-course-workbench {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 600px;
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid rgba(74,51,43,0.11);
  border-radius: 24px;
  background: rgba(255,252,247,0.82);
  box-shadow: 0 24px 65px rgba(74,51,43,0.09);
}

.male-course-chapter-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 20px 20px;
  border-right: 1px solid var(--male-line);
  background: rgba(238,229,219,0.56);
}

.male-course-chapter-rail > header {
  padding: 0 10px 24px;
}

.male-course-chapter-rail > header small,
.male-course-chapter-panel > header small,
.male-course-overlay-panel > header small,
.male-course-reader-curriculum header small,
.male-course-lesson-intro > small,
.male-course-section-index > small {
  color: var(--male-copper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.male-course-chapter-rail > header strong {
  display: block;
  margin-top: 6px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 25px;
}

.male-course-chapter-rail > header p {
  margin: 10px 0 0;
  color: var(--male-muted);
  font-size: 13px;
  line-height: 1.7;
}

.male-course-chapter-rail > nav {
  display: grid;
  gap: 5px;
}

.male-course-chapter-rail > nav > button,
.male-course-toolbox-entry {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 10px 12px;
  border: 0;
  border-radius: 13px;
  color: var(--male-muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.male-course-chapter-rail > nav > button:hover,
.male-course-chapter-rail > nav > button.is-active {
  color: var(--male-ink);
  background: #fffaf3;
  box-shadow: inset 3px 0 0 var(--male-copper), 0 8px 20px rgba(74,51,43,0.07);
}

.male-course-chapter-rail > nav > button > span,
.male-course-toolbox-entry > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--male-line);
  border-radius: 50%;
  color: var(--male-copper);
  font-size: 11px;
  font-weight: 700;
}

.male-course-chapter-rail > nav > button div strong,
.male-course-chapter-rail > nav > button div small,
.male-course-toolbox-entry div strong,
.male-course-toolbox-entry div small {
  display: block;
}

.male-course-chapter-rail > nav > button div strong,
.male-course-toolbox-entry div strong {
  color: inherit;
  font-size: 16px;
}

.male-course-chapter-rail > nav > button div small,
.male-course-toolbox-entry div small {
  margin-top: 2px;
  color: #75665f;
  font-size: 12px;
}

.male-course-toolbox-entry {
  grid-template-columns: 36px 1fr;
  margin-top: auto;
  border-top: 1px solid var(--male-line);
  border-radius: 0;
}

.male-course-chapter-stage {
  min-width: 0;
  padding: 48px clamp(34px, 5vw, 78px);
  background:
    linear-gradient(120deg, rgba(255,255,255,0.76), rgba(255,252,247,0.92)),
    radial-gradient(circle at 90% 10%, rgba(187,111,76,0.1), transparent 27%);
}

.male-course-chapter-panel[hidden] {
  display: none;
}

.male-course-chapter-panel.is-active {
  animation: male-panel-in 220ms ease both;
}

@keyframes male-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.male-course-chapter-panel > header {
  max-width: 720px;
  margin-bottom: 30px;
}

.male-course-chapter-panel > header h2 {
  margin: 8px 0;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.male-course-chapter-panel > header p {
  margin: 0;
  color: var(--male-muted);
  font-size: 16px;
  line-height: 1.8;
}

.male-course-chapter-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--male-line);
}

.male-course-chapter-panel li {
  border-bottom: 1px solid var(--male-line);
}

.male-course-chapter-panel li > button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  color: var(--male-ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: padding 160ms ease, background 160ms ease;
}

.male-course-chapter-panel li > button:hover {
  padding-right: 14px;
  padding-left: 14px;
  background: rgba(185,111,76,0.055);
}

.male-course-chapter-panel li > button.is-current {
  margin: 5px 0;
  padding-right: 14px;
  padding-left: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(185,111,76,0.13), rgba(185,111,76,0.035));
  box-shadow: inset 3px 0 0 var(--male-copper);
}

.male-course-chapter-panel li > button > span {
  color: #a95838;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}

.male-course-chapter-panel li strong,
.male-course-chapter-panel li p {
  display: block;
  margin: 0;
}

.male-course-chapter-panel li strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 23px;
  font-weight: 600;
}

.male-course-chapter-panel li p {
  margin-top: 4px;
  color: #655750;
  font-size: 14px;
}

.male-course-chapter-panel li em {
  min-width: 42px;
  padding: 5px 9px;
  border: 1px solid var(--male-line);
  border-radius: 999px;
  color: #796a63;
  font-size: 12px;
  text-align: center;
  font-style: normal;
}

.male-course-chapter-panel li button.is-current em,
.male-course-chapter-panel li button.is-visited em {
  color: var(--male-copper);
  border-color: rgba(185,111,76,0.34);
  background: rgba(185,111,76,0.06);
}

.male-course-experience-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 24px;
  padding: 20px 28px 12px;
  color: var(--male-muted);
  font-size: 13px;
}

.male-course-overlay[hidden] {
  display: none;
}

.male-course-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr min(620px, 90vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.male-course-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.male-course-overlay-backdrop {
  grid-column: 1 / -1;
  grid-row: 1;
  border: 0;
  background: rgba(18,13,11,0.56);
  backdrop-filter: blur(8px);
}

.male-course-overlay-panel {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow: auto;
  padding: 32px;
  color: var(--male-ink);
  background: var(--male-paper);
  box-shadow: -30px 0 80px rgba(0,0,0,0.22);
  transform: translateX(100%);
  transition: transform 200ms ease;
}

.male-course-overlay.is-open .male-course-overlay-panel {
  transform: translateX(0);
}

.male-course-overlay-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--male-line);
}

.male-course-overlay-panel > header h2 {
  margin: 6px 0 5px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 36px;
}

.male-course-overlay-panel > header p {
  margin: 0;
  color: var(--male-muted);
  font-size: 13px;
}

.male-course-overlay-panel > header > button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--male-line);
  border-radius: 50%;
  color: var(--male-ink);
  font-size: 24px;
  background: transparent;
  cursor: pointer;
}

.male-course-toolbox-groups {
  margin-top: 18px;
}

.male-course-toolbox-group,
.male-course-extra-item {
  border-bottom: 1px solid var(--male-line);
}

.male-course-toolbox-group > summary,
.male-course-extra-item > summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
}

.male-course-toolbox-group summary::-webkit-details-marker,
.male-course-extra-item summary::-webkit-details-marker {
  display: none;
}

.male-course-toolbox-group > summary > span {
  color: var(--male-copper);
  font-family: Georgia, serif;
}

.male-course-toolbox-group summary strong,
.male-course-toolbox-group summary small,
.male-course-extra-item summary strong,
.male-course-extra-item summary small {
  display: block;
}

.male-course-toolbox-group summary strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 20px;
}

.male-course-toolbox-group summary small,
.male-course-extra-item summary small {
  margin-top: 4px;
  color: var(--male-muted);
  line-height: 1.55;
}

.male-course-toolbox-group summary em {
  color: var(--male-muted);
  font-size: 11px;
  font-style: normal;
}

.male-course-toolbox-group[open] > summary > b,
.male-course-extra-item[open] > summary > b {
  transform: rotate(45deg);
}

.male-course-toolbox-group > div {
  padding: 0 0 16px 42px;
}

.male-course-extra-item > summary {
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  padding: 17px 0;
}

.male-course-extra-item > summary > span {
  color: var(--male-copper);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.male-course-extra-item > div {
  padding: 6px 0 28px 78px;
}

.male-course-reader {
  min-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(74,51,43,0.11);
  border-radius: 24px;
  background: var(--male-paper);
  box-shadow: 0 24px 70px rgba(74,51,43,0.12);
}

.male-course-reader-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 320px) 1fr;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 0 26px;
  border-bottom: 1px solid var(--male-line);
  background: rgba(251,247,240,0.92);
  backdrop-filter: blur(18px);
}

.male-course-reader-topbar > button {
  width: fit-content;
  border: 0;
  color: var(--male-ink);
  background: transparent;
  cursor: pointer;
}

.male-course-reader-topbar > button:last-child {
  justify-self: end;
}

.male-course-reader-topbar > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--male-muted);
  font-size: 11px;
}

.male-course-reader-topbar i {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(74,51,43,0.12);
}

.male-course-reader-topbar i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--male-copper);
}

.male-course-reader-frame {
  display: grid;
  grid-template-columns: 240px minmax(0, 860px) minmax(170px, 1fr);
  align-items: start;
}

.male-course-reader-curriculum,
.male-course-section-index {
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 68px);
  overflow: auto;
  scrollbar-width: thin;
}

.male-course-reader-curriculum {
  padding: 30px 18px;
  border-right: 1px solid var(--male-line);
  background: rgba(239,230,220,0.48);
}

.male-course-reader-curriculum header strong {
  display: block;
  margin-top: 7px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 21px;
}

.male-course-reader-curriculum nav > section {
  margin-top: 28px;
}

.male-course-reader-curriculum nav > section > span {
  display: block;
  margin: 0 8px 8px;
  color: var(--male-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.male-course-reader-curriculum nav button {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  color: var(--male-muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.male-course-reader-curriculum nav button:hover,
.male-course-reader-curriculum nav button.is-active {
  color: var(--male-ink);
  background: rgba(255,255,255,0.78);
}

.male-course-reader-curriculum nav button b {
  color: var(--male-copper);
  font-family: Georgia, serif;
  font-size: 12px;
}

.male-course-reader-curriculum nav button strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.male-course-reading-canvas {
  min-width: 0;
  padding: 64px clamp(34px, 5.2vw, 80px) 80px;
  background:
    linear-gradient(rgba(251,247,240,0.97), rgba(251,247,240,0.97)),
    radial-gradient(circle at 80% 0%, rgba(192,113,76,0.12), transparent 30%);
}

.male-course-lesson-intro {
  max-width: 740px;
  margin-bottom: 42px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--male-line);
}

.male-course-lesson-intro h1 {
  margin: 12px 0 8px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.male-course-lesson-intro h2 {
  margin: 0 0 18px;
  color: var(--male-copper);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 22px;
  font-weight: 500;
}

.male-course-lesson-intro > p {
  max-width: 680px;
  margin: 0;
  color: var(--male-muted);
  font-size: 15px;
  line-height: 1.9;
}

.male-course-lesson-intro > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.male-course-lesson-intro > div span {
  padding: 7px 11px;
  border: 1px solid var(--male-line);
  border-radius: 999px;
  color: var(--male-muted);
  font-size: 11px;
}

.male-course-lesson-intro > button {
  margin-top: 16px;
  padding: 0;
  border: 0;
  color: var(--male-copper);
  background: transparent;
  cursor: pointer;
}

.male-course-inline-toc {
  display: none;
}

.male-course-document {
  max-width: 740px;
}

.male-course-document .male-intimacy-rich-content {
  color: var(--male-ink);
  font-size: 16px;
  line-height: 1.95;
}

.male-course-document .male-course-page-fragment {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.male-course-document :where(img, svg, video, canvas) {
  max-width: 100%;
}

.male-course-document :where(img, video) {
  height: auto;
}

.male-course-document .male-course-page-fragment + .male-course-page-fragment {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--male-line);
}

.male-course-document .male-course-page-fragment > h1:first-child {
  display: none;
}

.male-course-document h2,
.male-course-document h3 {
  scroll-margin-top: 100px;
  color: var(--male-ink);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
}

.male-course-document h2 {
  margin: 2.3em 0 0.8em;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.3;
}

.male-course-document h3 {
  margin: 2em 0 0.65em;
  font-size: 23px;
}

.male-course-document p,
.male-course-document li {
  color: #433833;
}

.male-course-document blockquote,
.male-course-document .heroquote,
.male-course-document .callout,
.male-course-document .note-box {
  margin: 28px 0;
  padding: 22px 24px;
  border: 0;
  border-left: 3px solid var(--male-copper);
  border-radius: 0 14px 14px 0;
  color: var(--male-ink);
  background: #f2e7dc;
  box-shadow: none;
}

.male-course-document .heroquote strong,
.male-course-document blockquote strong,
.male-course-document .callout strong,
.male-course-document .note-box strong {
  color: var(--male-ink) !important;
}

.male-course-document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.male-course-document th,
.male-course-document td {
  padding: 12px;
  border-bottom: 1px solid var(--male-line);
  text-align: left;
}

.male-course-context-video {
  margin: 42px 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: #fff7ee;
  background: linear-gradient(135deg, #211713, #3a261f);
  box-shadow: 0 20px 48px rgba(43,27,20,0.18);
}

.male-course-reader-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: 70px;
  overflow: hidden;
  border: 1px solid var(--male-line);
  border-radius: 18px;
  background: var(--male-line);
}

.male-course-reader-navigation button {
  min-height: 104px;
  padding: 20px 24px;
  border: 0;
  color: var(--male-ink);
  text-align: left;
  background: #fffdf9;
  cursor: pointer;
}

.male-course-reader-navigation button:last-child {
  text-align: right;
}

.male-course-reader-navigation small,
.male-course-reader-navigation strong {
  display: block;
}

.male-course-reader-navigation small {
  color: var(--male-copper);
  font-size: 11px;
}

.male-course-reader-navigation strong {
  margin-top: 7px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 17px;
}

.male-course-section-index {
  padding: 38px 24px;
  border-left: 1px solid var(--male-line);
}

.male-course-section-index nav {
  margin-top: 16px;
  border-top: 1px solid var(--male-line);
}

.male-course-section-index nav button {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--male-line);
  color: var(--male-muted);
  font-size: 12px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.male-course-section-index nav button:hover,
.male-course-section-index nav button.is-active {
  color: var(--male-copper);
}

.male-course-section-index nav span {
  font-family: Georgia, serif;
}

.male-course-section-index > button {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  border: 1px solid var(--male-line);
  border-radius: 999px;
  color: var(--male-ink);
  background: transparent;
  cursor: pointer;
}

.male-course-lesson-map-panel > nav {
  margin-top: 20px;
}

.male-course-lesson-map-panel > nav section {
  margin-top: 24px;
}

.male-course-lesson-map-panel > nav h3 {
  margin: 0 0 8px;
  color: var(--male-copper);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.male-course-lesson-map-panel > nav button {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 24px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--male-line);
  color: var(--male-ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.male-course-lesson-map-panel > nav button.is-active {
  color: var(--male-copper);
}

.male-course-lesson-map-panel > nav button strong,
.male-course-lesson-map-panel > nav button small {
  display: block;
}

.male-course-lesson-map-panel > nav button small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--male-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .male-course-reader-frame {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .male-course-section-index {
    display: none;
  }

  .male-course-inline-toc {
    display: block;
    margin-bottom: 34px;
    border-top: 1px solid var(--male-line);
    border-bottom: 1px solid var(--male-line);
  }

  .male-course-inline-toc summary {
    padding: 15px 0;
    cursor: pointer;
  }

  .male-course-inline-toc nav {
    display: grid;
    gap: 1px;
    padding-bottom: 14px;
    background: var(--male-line);
  }

  .male-course-inline-toc button {
    padding: 11px 12px;
    border: 0;
    text-align: left;
    background: #fffdf9;
  }
}

@media (max-width: 820px) {
  .male-course-experience-page .course-center-main,
  .male-course-reader-page .course-center-main {
    padding: 0;
    background: var(--male-paper);
  }

  .male-course-experience,
  .male-course-reader {
    width: 100%;
  }

  .male-course-scene {
    min-height: 430px;
    border-radius: 0;
  }

  .male-course-scene-topbar {
    grid-template-columns: auto 1fr auto;
    padding: 17px 18px;
  }

  .male-course-scene-topbar span {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .male-course-scene-copy {
    width: auto;
    padding: 58px 24px 44px;
  }

  .male-course-scene-copy h1 {
    max-width: none;
    font-size: clamp(38px, 11.6vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1.12;
  }

  .male-course-scene-copy > p {
    max-width: 470px;
    font-size: 15px;
  }

  .male-course-scene-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .male-course-question-lane {
    display: block;
    margin: 0;
    padding: 22px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .male-course-question-lane nav {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    background: transparent;
    scrollbar-width: none;
  }

  .male-course-question-lane nav::-webkit-scrollbar {
    display: none;
  }

  .male-course-question-lane nav button {
    flex: 0 0 150px;
    border: 1px solid var(--male-line);
    border-radius: 13px;
  }

  .male-course-workbench {
    display: block;
    min-height: 0;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .male-course-chapter-rail {
    display: block;
    padding: 24px 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--male-line);
  }

  .male-course-chapter-rail > header p {
    max-width: 480px;
  }

  .male-course-chapter-rail > nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 18px;
    scrollbar-width: none;
  }

  .male-course-chapter-rail > nav > button {
    flex: 0 0 180px;
    border: 1px solid var(--male-line);
    background: rgba(255,255,255,0.52);
  }

  .male-course-toolbox-entry {
    display: none;
  }

  .male-course-chapter-stage {
    padding: 38px 18px 48px;
  }

  .male-course-chapter-panel > header h2 {
    font-size: 42px;
  }

  .male-course-chapter-panel li > button {
    grid-template-columns: 42px minmax(0,1fr) 18px;
    gap: 11px;
    padding: 19px 2px;
  }

  .male-course-chapter-panel li em {
    display: none;
  }

  .male-course-chapter-panel li strong {
    font-size: 18px;
  }

  .male-course-experience-footer {
    padding: 20px 18px 100px;
  }

  .male-course-overlay {
    grid-template-columns: 1fr;
  }

  .male-course-overlay-panel {
    grid-column: 1;
    width: 100%;
    padding: 24px 18px 100px;
  }

  .male-course-toolbox-group > div,
  .male-course-extra-item > div {
    padding-left: 0;
  }

  .male-course-reader {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .male-course-reader-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    min-height: 58px;
    padding: 0 16px;
  }

  .male-course-reader-topbar > div {
    display: block;
    text-align: center;
  }

  .male-course-reader-topbar i {
    width: 90px;
    margin: 5px auto 0;
  }

  .male-course-reader-frame {
    display: block;
  }

  .male-course-reader-curriculum,
  .male-course-section-index {
    display: none;
  }

  .male-course-reading-canvas {
    padding: 50px 20px 110px;
  }

  .male-course-lesson-intro {
    margin-bottom: 32px;
    padding-bottom: 30px;
  }

  .male-course-lesson-intro h1 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .male-course-lesson-intro h2 {
    font-size: 19px;
  }

  .male-course-document,
  .male-course-lesson-intro {
    max-width: none;
  }

  .male-course-document .male-intimacy-rich-content {
    font-size: 16px;
    line-height: 1.9;
  }

  .male-course-document .male-course-page-fragment + .male-course-page-fragment {
    margin-top: 36px;
    padding-top: 36px;
  }

  .male-course-document table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .male-course-document .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .male-course-reader-navigation {
    grid-template-columns: 1fr;
  }

  .male-course-reader-navigation button:last-child {
    text-align: left;
  }
}

/* Keep the course overview in normal document flow so the third course is never clipped. */
.course-center-page.course-section-hub {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

.course-center-page.course-section-hub .course-center-main {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

.course-center-page.course-section-hub .course-section-grid {
  height: auto;
  max-height: none;
  overflow: visible;
}

.course-center-page.course-section-hub .course-section-card--male {
  display: grid;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 820px) {
  .course-center-page.course-section-hub .course-section-card--male {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .male-course-experience *,
  .male-course-reader * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The course overview uses one shared card format for every course. */
.course-section-hub .course-section-card--male {
  grid-column: auto;
  display: flex;
  min-height: 610px;
  flex-direction: column;
  border-color: rgba(210, 112, 78, 0.56);
  border-radius: 14px;
  background: #fffdfa;
  box-shadow: 0 18px 44px rgba(86, 62, 45, 0.055);
}

.course-section-hub .course-section-card--male .course-section-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid rgba(221, 208, 196, 0.9);
}

.course-section-hub .course-section-card--male .course-section-visual::after {
  display: none;
}

.course-section-hub .course-section-card--male .course-section-card__body {
  min-height: 350px;
  padding: 22px 24px 24px;
}

.course-section-hub .course-section-card--male .course-section-meta {
  justify-content: space-between;
}

.course-section-hub .course-section-card--male h3 {
  margin: 18px 0 8px;
}

.course-section-hub .course-section-card--male p {
  min-height: 52px;
  font-size: 14px;
  line-height: 1.7;
}

.course-section-hub .course-section-card--male .course-section-male-chapters {
  gap: 0;
  margin: 18px 0 22px;
}

.course-section-hub .course-section-card--male .course-section-male-chapters button {
  grid-template-columns: 27px minmax(0, 1fr) auto 14px;
  min-height: 0;
  padding: 10px 0;
  border-top: 1px solid #eee4dc;
  border-radius: 0;
}

.course-section-hub .course-section-card--male .course-section-male-cta {
  width: fit-content;
  min-height: 44px;
  padding: 0 19px;
  border-radius: 8px;
}

@media (max-width: 1100px) and (min-width: 721px) {
  .course-section-hub .course-section-card--male {
    min-height: 590px;
  }
}

@media (max-width: 820px) {
  .course-section-hub .course-section-card--male {
    display: flex;
    min-height: 0;
  }

  .course-section-hub .course-section-card--male .course-section-visual {
    aspect-ratio: 16 / 10;
  }

  .course-section-hub .course-section-card--male .course-section-card__body {
    min-height: 0;
    padding: 20px 18px;
  }

  .course-section-hub .course-section-card--male .course-section-male-cta {
    width: 100%;
  }
}

/* Male course overview: a single clear course entry rather than a generic image card. */
.course-section-hub .course-section-card--male {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  min-height: 0;
  overflow: hidden;
  border-color: rgba(89, 60, 43, 0.16);
  border-radius: 18px;
  background: #fffdfa;
  box-shadow: 0 8px 32px rgba(62, 46, 35, 0.08);
}

.course-section-hub .course-section-card--male .course-section-visual {
  min-height: 100%;
  aspect-ratio: auto;
  border: 0;
  transform: none;
}

.course-section-hub .course-section-card--male .course-section-visual::after {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 54px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 253, 250, 0), #fffdfa 94%);
  content: "";
  pointer-events: none;
}

.course-section-hub .course-section-card--male .course-section-card__body {
  min-height: 0;
  padding: 30px 32px 32px;
}

.course-section-body-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}

.course-section-body-keywords span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(119, 78, 56, 0.16);
  border-radius: 999px;
  background: #f7f0e9;
  color: #6c5142;
  font-size: 12px;
  font-weight: 700;
}

.course-section-hub .course-section-card--male .course-section-meta {
  justify-content: flex-start;
  gap: 9px;
}

.course-section-hub .course-section-card--male .course-section-meta > span:nth-child(2)::after {
  margin-left: 9px;
  color: #c8b8ab;
  content: "·";
}

.course-section-progress {
  color: #8b6a58;
  font-size: 12px;
  font-weight: 600;
}

.course-section-hub .course-section-card--male h3 {
  margin: 13px 0 9px;
}

.course-section-hub .course-section-card--male p {
  min-height: 0;
  color: #685a51;
  font-size: 15px;
  line-height: 1.75;
}

.course-section-male-chapters {
  display: grid;
  gap: 4px;
  margin: 20px 0 22px;
}

.course-section-hub .course-section-card--male .course-section-male-chapters button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #40342e;
  text-align: left;
  transform: none;
}

.course-section-hub .course-section-card--male.is-available:hover .course-section-male-chapters button,
.course-section-hub .course-section-card--male.is-available:focus-within .course-section-male-chapters button {
  border-left-color: transparent;
  background: transparent;
  color: #40342e;
  transform: none;
}

.course-section-hub .course-section-card--male .course-section-male-chapters button:hover,
.course-section-hub .course-section-card--male .course-section-male-chapters button:focus-visible,
.course-section-hub .course-section-card--male.is-available:hover .course-section-male-chapters button:hover,
.course-section-hub .course-section-card--male.is-available:focus-within .course-section-male-chapters button:focus-visible {
  border-left-color: #b96f4c;
  background: rgba(185, 111, 76, 0.065);
  color: #2d211c;
  transform: translateX(2px);
}

.course-section-male-chapters button > span {
  margin: 0;
  color: #a56a4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.course-section-male-chapters button strong {
  font-size: 14px;
  font-weight: 700;
}

.course-section-male-chapters button small {
  color: #9b8c82;
  font-size: 11px;
}

.course-section-male-chapters button b {
  color: #a88773;
  font-size: 18px;
  font-weight: 400;
}

.course-section-hub .course-section-card--male .course-section-male-cta {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  border-color: #a8583e;
  background: #a8583e;
  color: #fff;
  font-weight: 700;
}

.course-section-hub .course-section-card--male .course-section-male-cta:hover,
.course-section-hub .course-section-card--male .course-section-male-cta:focus-visible {
  border-color: #8f4934;
  background: #8f4934;
  color: #fff;
  transform: translateY(-1px);
}

.course-section-hub .course-section-card--male:hover .course-section-visual,
.course-section-hub .course-section-card--male:focus-within .course-section-visual {
  transform: none;
}

@media (max-width: 820px) {
  .course-section-hub .course-section-card--male {
    display: flex;
    grid-column: auto;
    flex-direction: column;
  }

  .course-section-hub .course-section-card--male .course-section-visual {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .course-section-hub .course-section-card--male .course-section-visual::after {
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 42px;
    background: linear-gradient(180deg, rgba(255, 253, 250, 0), #fffdfa 94%);
  }

  .course-section-hub .course-section-card--male .course-section-card__body {
    padding: 22px 20px 24px;
  }

  .course-section-hub .course-section-card--male .course-section-male-chapters button {
    grid-template-columns: 26px minmax(0, 1fr) auto 12px;
    min-height: 52px;
    padding: 9px 8px;
  }

  .male-course-document .five-concepts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
    margin: 18px 0 26px;
  }

  .male-course-document .five-concepts span {
    min-width: 0;
    min-height: 112px;
    padding: 14px 8px;
  }

  .male-course-document .five-concepts em {
    padding: 12px 10px;
  }
}

/* Final course-card normalization: male course follows the same overview format. */
.course-section-hub .course-section-card--male {
  grid-column: auto;
  display: flex;
  min-height: 610px;
  flex-direction: column;
  border-color: rgba(210, 112, 78, 0.56);
  border-radius: 14px;
  background: #fffdfa;
  box-shadow: 0 18px 44px rgba(86, 62, 45, 0.055);
}

.course-section-hub .course-section-card--male .course-section-visual {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid rgba(221, 208, 196, 0.9);
}

.course-section-hub .course-section-card--male .course-section-visual::after {
  display: none;
}

.course-section-hub .course-section-card--male .course-section-card__body {
  min-height: 350px;
  padding: 22px 24px 24px;
}

.course-section-hub .course-section-card--male .course-section-meta {
  justify-content: space-between;
}

.course-section-hub .course-section-card--male h3 {
  margin: 18px 0 8px;
}

.course-section-hub .course-section-card--male p {
  min-height: 52px;
  font-size: 14px;
  line-height: 1.7;
}

.course-section-hub .course-section-card--male .course-section-male-chapters {
  gap: 0;
  margin: 18px 0 22px;
}

.course-section-hub .course-section-card--male .course-section-male-chapters button {
  grid-template-columns: 27px minmax(0, 1fr) auto 14px;
  min-height: 0;
  padding: 10px 0;
  border-top: 1px solid #eee4dc;
  border-radius: 0;
}

.course-section-hub .course-section-card--male .course-section-male-cta {
  width: fit-content;
  min-height: 44px;
  padding: 0 19px;
  border-radius: 8px;
}

@media (max-width: 1100px) and (min-width: 721px) {
  .course-section-hub .course-section-card--male {
    min-height: 590px;
  }
}

@media (max-width: 820px) {
  .course-section-hub .course-section-card--male {
    display: flex;
    min-height: 0;
  }

  .course-section-hub .course-section-card--male .course-section-visual {
    aspect-ratio: 16 / 10;
  }

  .course-section-hub .course-section-card--male .course-section-card__body {
    min-height: 0;
    padding: 20px 18px;
  }

  .course-section-hub .course-section-card--male .course-section-male-chapters button {
    min-height: 0;
    padding: 10px 0;
  }

  .course-section-hub .course-section-card--male .course-section-male-cta {
    width: 100%;
  }
}

/* ==========================================================================
   Typography & responsive reading layer (hand-maintained).
   male-course-visuals.css is GENERATED (do not edit by hand); this file
   loads after it, so the rules below intentionally override the generated
   mm-based print styling for comfortable on-screen reading.
   ========================================================================== */

/* --- Base reading rhythm ------------------------------------------------ */
.male-course-document .male-intimacy-rich-content {
  color: #3d332d;
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: 0.012em;
  overflow-wrap: break-word;
}

.male-course-document .male-intimacy-rich-content p {
  margin: 0 0 1em;
}

.male-course-document .male-intimacy-rich-content ul:not([class]),
.male-course-document .male-intimacy-rich-content ol:not([class]) {
  margin: 0.4em 0 1.2em;
  padding-left: 1.4em;
}

.male-course-document .male-intimacy-rich-content ul:not([class]) li,
.male-course-document .male-intimacy-rich-content ol:not([class]) li {
  margin-bottom: 0.35em;
}

/* --- Heading scale ------------------------------------------------------ */
.male-course-document .male-intimacy-rich-content h2 {
  margin: 1.5em 0 0.75em;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.male-course-document .male-intimacy-rich-content h3 {
  margin: 1.6em 0 0.6em;
  padding-left: 12px;
  border-left: 3px solid var(--male-copper, #b96f4c);
  font-size: 20px;
  line-height: 1.45;
  text-wrap: pretty;
}

.male-course-document .male-course-page-fragment > h2:first-child,
.male-course-document .male-intimacy-rich-content .page-segment > h2:first-child {
  margin-top: 0.2em;
}

/* --- Fragment separation: slimmer gaps, lighter rule -------------------- */
.male-course-document .male-course-page-fragment + .male-course-page-fragment {
  margin-top: 40px;
  padding-top: 40px;
  border-top-color: rgba(74, 51, 43, 0.09);
}

/* --- Quote restyle: keep ONE dark heroquote per lesson, lighten .quote -- */
.male-course-document .male-intimacy-rich-content .quote {
  justify-content: flex-start;
  min-height: 0;
  margin: 1.4em 0;
  padding: 14px 18px;
  border-left: 3px solid #743447;
  border-radius: 0 12px 12px 0;
  background: rgba(116, 52, 71, 0.065);
  color: #4a2e38;
}

.male-course-document .male-intimacy-rich-content .quote > p,
.male-course-document .male-intimacy-rich-content .quote p {
  width: auto;
  color: inherit;
  font-size: 15.5px;
  line-height: 1.7;
  text-align: left;
  transform: none;
}

.male-course-document .male-intimacy-rich-content .quote strong {
  color: #743447;
}

.male-course-document .male-intimacy-rich-content .quote > .bold-line {
  color: #743447;
}

/* bold-line stays a light inline emphasis, same family as .quote */
.male-course-document .male-intimacy-rich-content .bold-line {
  margin: 1.1em 0 0.9em;
  font-size: 15px;
  line-height: 1.6;
}

/* --- Fine print ---------------------------------------------------------- */
.male-course-document .male-intimacy-rich-content .male-course-reference,
.male-course-document .male-intimacy-rich-content .medical-ps {
  font-size: 12.5px;
  line-height: 1.7;
}

/* --- five-concepts desktop type ------------------------------------------ */
.male-course-document .male-intimacy-rich-content .five-concepts b {
  font-size: 13.5px;
}

.male-course-document .male-intimacy-rich-content .five-concepts small {
  font-size: 12.5px;
}

/* --- Reader chrome -------------------------------------------------------- */
.male-course-lesson-intro h1 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.22;
  text-wrap: pretty;
}

.male-course-lesson-intro > div span {
  font-size: 12px;
}

.male-course-reader-curriculum nav button strong {
  font-size: 12.5px;
  line-height: 1.45;
}

.male-course-reader-navigation button {
  min-height: 88px;
}

/* --- Landing chapter panels ------------------------------------------------ */
.male-course-chapter-panel > header h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.24;
  text-wrap: pretty;
}

.male-course-chapter-panel li strong {
  font-size: 20px;
}

/* ==========================================================================
   Generated-figure responsive fixes NOT covered by visuals.css media queries
   ========================================================================== */
@media (max-width: 820px) {
  /* six / five / four column grids collapse to 2 */
  .male-course-document .male-intimacy-rich-content .six-stage,
  .male-course-document .male-intimacy-rich-content .condom-steps,
  .male-course-document .male-intimacy-rich-content .health-summary > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .male-course-document .male-intimacy-rich-content .knob-console,
  .male-course-document .male-intimacy-rich-content .variable-four,
  .male-course-document .male-intimacy-rich-content .regulation-curve > div,
  .male-course-document .male-intimacy-rich-content .downshift-visual,
  .male-course-document .male-intimacy-rich-content .feedback,
  .male-course-document .male-intimacy-rich-content .referral,
  .male-course-document .male-intimacy-rich-content .sti-signal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* three column grids collapse to 2 */
  .male-course-document .male-intimacy-rich-content .question-visual,
  .male-course-document .male-intimacy-rich-content .triple-visual,
  .male-course-document .male-intimacy-rich-content .env-visual,
  .male-course-document .male-intimacy-rich-content .method-visual,
  .male-course-document .male-intimacy-rich-content .capability-visual,
  .male-course-document .male-intimacy-rich-content .early-visual,
  .male-course-document .male-intimacy-rich-content .map-visual,
  .male-course-document .male-intimacy-rich-content .progress-visual,
  .male-course-document .male-intimacy-rich-content .profile-tree .tree-results,
  .male-course-document .male-intimacy-rich-content .profile-tree .tree-lines,
  .male-course-document .male-intimacy-rich-content .diagnosis-tree > section,
  .male-course-document .male-intimacy-rich-content .health-summary > section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* non-wrapping flex rows */
  .male-course-document .male-intimacy-rich-content .concept-flow,
  .male-course-document .male-intimacy-rich-content .screen-visual,
  .male-course-document .male-intimacy-rich-content .loop-visual,
  .male-course-document .male-intimacy-rich-content .route-visual,
  .male-course-document .male-intimacy-rich-content .cycle-visual,
  .male-course-document .male-intimacy-rich-content .step-visual {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* 9-cell sequence wraps instead of overflowing */
  .male-course-document .male-intimacy-rich-content .short-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  /* fixed mm gutters shrink */
  .male-course-document .male-intimacy-rich-content .foreplay-timing,
  .male-course-document .male-intimacy-rich-content .feedback-preview {
    grid-template-columns: 1fr 8mm 1fr 8mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .case-route-preview,
  .male-course-document .male-intimacy-rich-content .spray-route {
    grid-template-columns: 1fr 6mm 1fr 6mm 1fr 6mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .referral-next,
  .male-course-document .male-intimacy-rich-content .week-visual,
  .male-course-document .male-intimacy-rich-content .sensation-practice,
  .male-course-document .male-intimacy-rich-content .shared-safety {
    grid-template-columns: 1fr 8mm 1fr 8mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .guardrail,
  .male-course-document .male-intimacy-rich-content .postcoital-response {
    grid-template-columns: 1fr 9mm 1fr 9mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .desire-bridge {
    grid-template-columns: 1fr 8mm 22mm 8mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .ga-summary,
  .male-course-document .male-intimacy-rich-content .compare-move {
    grid-template-columns: 1fr 9mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .alarm-visual {
    grid-template-columns: 1fr 12mm 1.4fr;
  }

  /* arousal table: shrink the fixed mm label column */
  .male-course-document .male-intimacy-rich-content .arousal-levels > div {
    grid-template-columns: 10mm 30mm 1fr;
  }

  .male-course-document .male-intimacy-rich-content .arousal-levels b,
  .male-course-document .male-intimacy-rich-content .arousal-levels span {
    padding: 2mm 2.2mm;
    font-size: 11.5px;
  }

  /* intro + fragment rhythm on small screens */
  .male-course-lesson-intro h1 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .male-course-document .male-intimacy-rich-content h2 {
    margin-top: 1.3em;
  }

  .male-course-document .male-course-page-fragment + .male-course-page-fragment {
    margin-top: 32px;
    padding-top: 32px;
  }
}

@media (max-width: 560px) {
  /* six-item strips become 2 columns; triads become single column */
  .male-course-document .male-intimacy-rich-content .six-stage,
  .male-course-document .male-intimacy-rich-content .condom-steps,
  .male-course-document .male-intimacy-rich-content .health-summary > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .male-course-document .male-intimacy-rich-content .question-visual,
  .male-course-document .male-intimacy-rich-content .triple-visual,
  .male-course-document .male-intimacy-rich-content .env-visual,
  .male-course-document .male-intimacy-rich-content .method-visual,
  .male-course-document .male-intimacy-rich-content .capability-visual,
  .male-course-document .male-intimacy-rich-content .early-visual,
  .male-course-document .male-intimacy-rich-content .map-visual,
  .male-course-document .male-intimacy-rich-content .progress-visual,
  .male-course-document .male-intimacy-rich-content .diagnosis-tree > section,
  .male-course-document .male-intimacy-rich-content .health-summary > section {
    grid-template-columns: minmax(0, 1fr);
  }

  .male-course-document .male-intimacy-rich-content .map-visual {
    padding-top: 6mm;
  }
}

/* --- Grid blowout fix -----------------------------------------------------
   .male-intimacy-rich-content is display:grid with an implicit auto track;
   fragments sized by min-content could exceed the 740px content column
   (observed 369px fragments inside a 290px column at 390px viewport).
   Pin the track to the container and let fragments shrink. */
.male-course-document .male-intimacy-rich-content {
  grid-template-columns: minmax(0, 1fr);
}

.male-course-document .male-course-page-fragment,
.male-course-document .male-intimacy-rich-content > * {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   Unified figure skin — "paper magazine diagram" language.
   The generated visuals.css mixes three dialects (flat solid chips,
   gauge/instrument styling, photo figures). This layer unifies them:
   one border color, one radius scale, tinted fills with deep text instead
   of solid color blocks with white text. Small solid accents (number
   dots, the closing strip, heroquote) stay solid on purpose.
   ========================================================================== */

/* --- 1. One border color everywhere --------------------------------------- */
.male-course-document .male-intimacy-rich-content .step-visual,
.male-course-document .male-intimacy-rich-content .week-visual,
.male-course-document .male-intimacy-rich-content .variable-four,
.male-course-document .male-intimacy-rich-content .desensitize-matrix,
.male-course-document .male-intimacy-rich-content .meter-visual,
.male-course-document .male-intimacy-rich-content .curve-visual,
.male-course-document .male-intimacy-rich-content .early-visual,
.male-course-document .male-intimacy-rich-content .route-risk,
.male-course-document .male-intimacy-rich-content .alarm-visual,
.male-course-document .male-intimacy-rich-content .arousal-levels,
.male-course-document .male-intimacy-rich-content .regulation-curve,
.male-course-document .male-intimacy-rich-content .mindful-core,
.male-course-document .male-intimacy-rich-content .mindful-steps,
.male-course-document .male-intimacy-rich-content .map-visual,
.male-course-document .male-intimacy-rich-content .progress-visual,
.male-course-document .male-intimacy-rich-content .profile-tree,
.male-course-document .male-intimacy-rich-content .wave,
.male-course-document .male-intimacy-rich-content .rhythm,
.male-course-document .male-intimacy-rich-content .diagnosis-tree,
.male-course-document .male-intimacy-rich-content .speech-matrix,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum,
.male-course-document .male-intimacy-rich-content .desire-bridge,
.male-course-document .male-intimacy-rich-content .sensation-practice,
.male-course-document .male-intimacy-rich-content .shared-safety,
.male-course-document .male-intimacy-rich-content .sti-signal,
.male-course-document .male-intimacy-rich-content .outer-steps,
.male-course-document .male-intimacy-rich-content .postcoital-response,
.male-course-document .male-intimacy-rich-content .ga-summary,
.male-course-document .male-intimacy-rich-content .spray-route,
.male-course-document .male-intimacy-rich-content .pain-branch,
.male-course-document .male-intimacy-rich-content .entry-start,
.male-course-document .male-intimacy-rich-content .guardrail,
.male-course-document .male-intimacy-rich-content .source-figure,
.male-course-document .male-intimacy-rich-content .body-map-visual,
.male-course-document .male-intimacy-rich-content .hub-visual,
.male-course-document .male-intimacy-rich-content .entry-expansion,
.male-course-document .male-intimacy-rich-content .knob-console,
.male-course-document .male-intimacy-rich-content .gesture-methods,
.male-course-document .male-intimacy-rich-content .sync-versions,
.male-course-document .male-intimacy-rich-content .orbit-route,
.male-course-document .male-intimacy-rich-content .recovery-orbit,
.male-course-document .male-intimacy-rich-content .downshift-curve,
.male-course-document .male-intimacy-rich-content .pelvic-butterfly,
.male-course-document .male-intimacy-rich-content .breath-body {
  border-color: #ded1bf;
}

.male-course-document .male-intimacy-rich-content .checklist span,
.male-course-document .male-intimacy-rich-content .referral span,
.male-course-document .male-intimacy-rich-content .choice-grid span,
.male-course-document .male-intimacy-rich-content .session-steps span,
.male-course-document .male-intimacy-rich-content .touch-methods span,
.male-course-document .male-intimacy-rich-content .aftercare-cards span,
.male-course-document .male-intimacy-rich-content .readiness-signals span,
.male-course-document .male-intimacy-rich-content .downshift-visual div,
.male-course-document .male-intimacy-rich-content .health-summary > div span,
.male-course-document .male-intimacy-rich-content .diagnosis-tree > section small,
.male-course-document .male-intimacy-rich-content .profile-tree .tree-results span,
.male-course-document .male-intimacy-rich-content .pain-branch,
.male-course-document .male-intimacy-rich-content .pain-branch > div span,
.male-course-document .male-intimacy-rich-content .five-concepts span,
.male-course-document .male-intimacy-rich-content .triple-visual div,
.male-course-document .male-intimacy-rich-content .capability-visual div,
.male-course-document .male-intimacy-rich-content .question-visual div,
.male-course-document .male-intimacy-rich-content .speech-matrix span,
.male-course-document .male-intimacy-rich-content .speech-matrix em,
.male-course-document .male-intimacy-rich-content .desensitize-matrix > div,
.male-course-document .male-intimacy-rich-content .arousal-levels > div,
.male-course-document .male-intimacy-rich-content .gesture-methods > div,
.male-course-document .male-intimacy-rich-content .sync-versions > div,
.male-course-document .male-intimacy-rich-content .source-figure > div {
  border-color: #ded1bf;
}

/* --- 2. One radius scale: 12px cards, 10px chips --------------------------- */
.male-course-document .male-intimacy-rich-content .step-visual,
.male-course-document .male-intimacy-rich-content .week-visual,
.male-course-document .male-intimacy-rich-content .variable-four,
.male-course-document .male-intimacy-rich-content .desensitize-matrix,
.male-course-document .male-intimacy-rich-content .meter-visual,
.male-course-document .male-intimacy-rich-content .curve-visual,
.male-course-document .male-intimacy-rich-content .early-visual,
.male-course-document .male-intimacy-rich-content .route-risk,
.male-course-document .male-intimacy-rich-content .alarm-visual,
.male-course-document .male-intimacy-rich-content .arousal-levels,
.male-course-document .male-intimacy-rich-content .regulation-curve,
.male-course-document .male-intimacy-rich-content .mindful-core,
.male-course-document .male-intimacy-rich-content .mindful-steps,
.male-course-document .male-intimacy-rich-content .map-visual,
.male-course-document .male-intimacy-rich-content .progress-visual,
.male-course-document .male-intimacy-rich-content .profile-tree,
.male-course-document .male-intimacy-rich-content .wave,
.male-course-document .male-intimacy-rich-content .rhythm,
.male-course-document .male-intimacy-rich-content .diagnosis-tree,
.male-course-document .male-intimacy-rich-content .speech-matrix,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum,
.male-course-document .male-intimacy-rich-content .desire-bridge,
.male-course-document .male-intimacy-rich-content .sensation-practice,
.male-course-document .male-intimacy-rich-content .shared-safety,
.male-course-document .male-intimacy-rich-content .sti-signal,
.male-course-document .male-intimacy-rich-content .outer-steps,
.male-course-document .male-intimacy-rich-content .postcoital-response,
.male-course-document .male-intimacy-rich-content .ga-summary,
.male-course-document .male-intimacy-rich-content .spray-route,
.male-course-document .male-intimacy-rich-content .pain-branch,
.male-course-document .male-intimacy-rich-content .entry-start,
.male-course-document .male-intimacy-rich-content .guardrail,
.male-course-document .male-intimacy-rich-content .source-figure,
.male-course-document .male-intimacy-rich-content .checklist span,
.male-course-document .male-intimacy-rich-content .referral span,
.male-course-document .male-intimacy-rich-content .choice-grid span,
.male-course-document .male-intimacy-rich-content .session-steps span,
.male-course-document .male-intimacy-rich-content .touch-methods span,
.male-course-document .male-intimacy-rich-content .aftercare-cards span,
.male-course-document .male-intimacy-rich-content .readiness-signals span,
.male-course-document .male-intimacy-rich-content .downshift-visual div,
.male-course-document .male-intimacy-rich-content .health-summary > div span,
.male-course-document .male-intimacy-rich-content .diagnosis-tree > section small,
.male-course-document .male-intimacy-rich-content .profile-tree .tree-results span {
  border-radius: 12px;
}

/* --- 3. Solid sage chips -> tinted chips ----------------------------------- */
.male-course-document .male-intimacy-rich-content .concept-flow,
.male-course-document .male-intimacy-rich-content .route-visual,
.male-course-document .male-intimacy-rich-content .cycle-visual,
.male-course-document .male-intimacy-rich-content .loop-visual,
.male-course-document .male-intimacy-rich-content .feedback span,
.male-course-document .male-intimacy-rich-content .cases span,
.male-course-document .male-intimacy-rich-content .compare div,
.male-course-document .male-intimacy-rich-content .compare-move div,
.male-course-document .male-intimacy-rich-content .diagnosis-tree > div span,
.male-course-document .male-intimacy-rich-content .health-summary > section b,
.male-course-document .male-intimacy-rich-content .speech-matrix small,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum span,
.male-course-document .male-intimacy-rich-content .desire-bridge span,
.male-course-document .male-intimacy-rich-content .sensation-practice span,
.male-course-document .male-intimacy-rich-content .sti-signal span,
.male-course-document .male-intimacy-rich-content .outer-steps span,
.male-course-document .male-intimacy-rich-content .postcoital-response span,
.male-course-document .male-intimacy-rich-content .ga-summary span,
.male-course-document .male-intimacy-rich-content .spray-route span,
.male-course-document .male-intimacy-rich-content .car-response .pedal,
.male-course-document .male-intimacy-rich-content .six-stage span,
.male-course-document .male-intimacy-rich-content .condom-steps span,
.male-course-document .male-intimacy-rich-content .map-visual span,
.male-course-document .male-intimacy-rich-content .mindful-core span,
.male-course-document .male-intimacy-rich-content .referral-next span,
.male-course-document .male-intimacy-rich-content .choice-grid small,
.male-course-document .male-intimacy-rich-content .choice-grid em,
.male-course-document .male-intimacy-rich-content .attention-visual div:last-child,
.male-course-document .male-intimacy-rich-content .split-visual .sage,
.male-course-document .male-intimacy-rich-content .desensitize-matrix small,
.male-course-document .male-intimacy-rich-content .arousal-levels .level-head,
.male-course-document .male-intimacy-rich-content .profile-head {
  background: rgba(79, 104, 92, 0.08);
  color: #42604f;
}

/* --- 4. Wine / brown / alternating variants -------------------------------- */
.male-course-document .male-intimacy-rich-content .cases span:last-child,
.male-course-document .male-intimacy-rich-content .feedback span:last-child,
.male-course-document .male-intimacy-rich-content .compare div:last-child,
.male-course-document .male-intimacy-rich-content .compare-move div:last-child,
.male-course-document .male-intimacy-rich-content .attention-visual div:first-child,
.male-course-document .male-intimacy-rich-content .diagnosis-tree > div span:nth-child(3),
.male-course-document .male-intimacy-rich-content .health-summary > section b:nth-child(3),
.male-course-document .male-intimacy-rich-content .speech-matrix > b,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum .inside,
.male-course-document .male-intimacy-rich-content .desire-bridge span:last-of-type,
.male-course-document .male-intimacy-rich-content .sensation-practice span:nth-of-type(3),
.male-course-document .male-intimacy-rich-content .sti-signal span:nth-child(3),
.male-course-document .male-intimacy-rich-content .sti-signal span:nth-child(4),
.male-course-document .male-intimacy-rich-content .outer-steps span:nth-of-type(3),
.male-course-document .male-intimacy-rich-content .postcoital-response span:nth-of-type(3),
.male-course-document .male-intimacy-rich-content .ga-summary span:last-child,
.male-course-document .male-intimacy-rich-content .spray-route span:nth-of-type(n+3),
.male-course-document .male-intimacy-rich-content .car-response .brake,
.male-course-document .male-intimacy-rich-content .six-stage span:nth-child(5),
.male-course-document .male-intimacy-rich-content .six-stage span:nth-child(6),
.male-course-document .male-intimacy-rich-content .condom-steps span:nth-child(5),
.male-course-document .male-intimacy-rich-content .condom-steps span:nth-child(6),
.male-course-document .male-intimacy-rich-content .map-visual span:nth-child(2),
.male-course-document .male-intimacy-rich-content .mindful-core span:nth-of-type(2n),
.male-course-document .male-intimacy-rich-content .referral-next span:last-of-type,
.male-course-document .male-intimacy-rich-content .choice-grid span:nth-child(2) small,
.male-course-document .male-intimacy-rich-content .split-visual .wine,
.male-course-document .male-intimacy-rich-content .alarm-visual strong {
  background: rgba(116, 52, 71, 0.07);
  color: var(--wine-deep);
}

.male-course-document .male-intimacy-rich-content .six-stage span:nth-child(2n),
.male-course-document .male-intimacy-rich-content .condom-steps span:nth-child(2n),
.male-course-document .male-intimacy-rich-content .diagnosis-tree > div span:nth-child(2),
.male-course-document .male-intimacy-rich-content .health-summary > section b:nth-child(2),
.male-course-document .male-intimacy-rich-content .sensation-practice span:nth-of-type(2),
.male-course-document .male-intimacy-rich-content .outer-steps span:nth-of-type(2),
.male-course-document .male-intimacy-rich-content .postcoital-response span:nth-of-type(2),
.male-course-document .male-intimacy-rich-content .spray-route span:nth-of-type(2) {
  background: rgba(111, 86, 73, 0.08);
  color: #6f5649;
}

.male-course-document .male-intimacy-rich-content .six-stage span:nth-child(5),
.male-course-document .male-intimacy-rich-content .six-stage span:nth-child(6),
.male-course-document .male-intimacy-rich-content .condom-steps span:nth-child(5),
.male-course-document .male-intimacy-rich-content .condom-steps span:nth-child(6) {
  background: rgba(116, 52, 71, 0.07);
  color: var(--wine-deep);
}

/* --- 5. Text that was white/amber on dark -> readable on tint -------------- */
.male-course-document .male-intimacy-rich-content .concept-flow b,
.male-course-document .male-intimacy-rich-content .route-visual b,
.male-course-document .male-intimacy-rich-content .cycle-visual b,
.male-course-document .male-intimacy-rich-content .loop-visual b {
  color: var(--wine-deep);
}

.male-course-document .male-intimacy-rich-content .six-stage b,
.male-course-document .male-intimacy-rich-content .condom-steps b,
.male-course-document .male-intimacy-rich-content .sensation-practice span b,
.male-course-document .male-intimacy-rich-content .outer-steps b,
.male-course-document .male-intimacy-rich-content .spray-route span b {
  color: inherit;
}

.male-course-document .male-intimacy-rich-content .car-response small,
.male-course-document .male-intimacy-rich-content .map-visual span small,
.male-course-document .male-intimacy-rich-content .compare span,
.male-course-document .male-intimacy-rich-content .compare-move span,
.male-course-document .male-intimacy-rich-content .attention-visual span,
.male-course-document .male-intimacy-rich-content .split-visual span,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum small,
.male-course-document .male-intimacy-rich-content .desire-bridge span small,
.male-course-document .male-intimacy-rich-content .ga-summary small,
.male-course-document .male-intimacy-rich-content .ga-summary em,
.male-course-document .male-intimacy-rich-content .postcoital-response small {
  color: #7c7168;
}

/* --- 6. Full-width footer strips (em) -> tint band ------------------------- */
.male-course-document .male-intimacy-rich-content .five-concepts em,
.male-course-document .male-intimacy-rich-content .variable-four em,
.male-course-document .male-intimacy-rich-content .route-risk em,
.male-course-document .male-intimacy-rich-content .readiness-signals em,
.male-course-document .male-intimacy-rich-content .foreplay-timing em,
.male-course-document .male-intimacy-rich-content .profile-tree > em,
.male-course-document .male-intimacy-rich-content .knob-console em {
  background: rgba(79, 104, 92, 0.08);
  color: #42604f;
}

.male-course-document .male-intimacy-rich-content .diagnosis-tree > em {
  background: rgba(116, 52, 71, 0.07);
  color: var(--wine-deep);
}

.male-course-document .male-intimacy-rich-content .desensitize-matrix p {
  background: rgba(116, 52, 71, 0.07) !important;
  color: var(--wine-deep) !important;
}

/* --- 7. prompt-card joins the .quote family -------------------------------- */
.male-course-document .male-intimacy-rich-content .prompt-card {
  border-left: 3px solid var(--wine-deep);
  border-radius: 0 12px 12px 0;
  background: rgba(116, 52, 71, 0.065);
  color: #4a2e38;
}

.male-course-document .male-intimacy-rich-content .prompt-card small {
  color: #8d6b76;
}

.male-course-document .male-intimacy-rich-content .prompt-card strong {
  color: #4a2e38;
}

/* --- 8. Orbit pills: tinted with a hairline, not solid ---------------------- */
.male-course-document .male-intimacy-rich-content .body-center,
.male-course-document .male-intimacy-rich-content .hub-visual > div,
.male-course-document .male-intimacy-rich-content .entry-expansion > div {
  border: 1px solid rgba(116, 52, 71, 0.28);
  background: rgba(116, 52, 71, 0.08);
  color: var(--wine-deep);
}

.male-course-document .male-intimacy-rich-content .body-map-visual span,
.male-course-document .male-intimacy-rich-content .hub-visual span,
.male-course-document .male-intimacy-rich-content .entry-expansion span {
  border: 1px solid rgba(79, 104, 92, 0.24);
  background: rgba(79, 104, 92, 0.09);
  color: #42604f;
}

/* --- 9. knob-console: retire the gauge instrumentation ---------------------- */
.male-course-document .male-intimacy-rich-content .knob-console i {
  border: 1.5px solid var(--sage-deep);
  background: transparent;
}

.male-course-document .male-intimacy-rich-content .knob-console i::after {
  display: none;
}

/* --- 10. Keep small solid accents: number dots and the finale strip ---------
   (question-visual b, mindful-steps b, profile-tree b, downshift-curve b,
   profile-head span circles, .course-close stay solid intentionally.) */

/* --- 11. Figure typography floor -------------------------------------------- */
.male-course-document .male-intimacy-rich-content .course-visual,
.male-course-document .male-intimacy-rich-content .visual,
.male-course-document .male-intimacy-rich-content .supplement-visual {
  font-size: 13px;
}

.male-course-document .male-intimacy-rich-content .source-figure figcaption {
  font-size: 13px;
  line-height: 1.65;
}

.male-course-document .male-intimacy-rich-content .male-course-page-fragment > p,
.male-course-document .male-intimacy-rich-content .page-segment:not(.compact-page) > p,
.male-course-document .male-intimacy-rich-content :not(.compact-page).template-body-map > p,
.male-course-document .male-intimacy-rich-content :not(.compact-page).template-arousal-scale > p,
.male-course-document .male-intimacy-rich-content :not(.compact-page).template-method-compare > p,
.male-course-document .male-intimacy-rich-content :not(.compact-page).template-delay-practice > p {
  color: #3d332d;
  font-size: 17px;
  line-height: 1.9;
}

.male-course-document .male-intimacy-rich-content .bold-line,
.male-course-document .male-intimacy-rich-content .page-segment > .bold-line {
  font-size: 17px;
  line-height: 1.75;
}

.male-course-document .male-intimacy-rich-content .quote > p,
.male-course-document .male-intimacy-rich-content .quote p {
  font-size: 16px;
  line-height: 1.75;
}

.male-course-document .male-intimacy-rich-content .male-course-reference,
.male-course-document .male-intimacy-rich-content .medical-ps {
  font-size: 13.5px;
  line-height: 1.75;
}

.male-course-document .male-intimacy-rich-content .course-visual :is(b, strong),
.male-course-document .male-intimacy-rich-content .visual :is(b, strong),
.male-course-document .male-intimacy-rich-content .supplement-visual :is(b, strong),
.male-course-document .male-intimacy-rich-content .body-center,
.male-course-document .male-intimacy-rich-content .hub-visual > div {
  font-size: 15px;
  line-height: 1.4;
}

.male-course-document .male-intimacy-rich-content .course-visual :is(span, i, em),
.male-course-document .male-intimacy-rich-content .visual :is(span, i, em),
.male-course-document .male-intimacy-rich-content .supplement-visual :is(span, i, em),
.male-course-document .male-intimacy-rich-content .body-map-visual span,
.male-course-document .male-intimacy-rich-content .hub-visual span,
.male-course-document .male-intimacy-rich-content .orbit-route b,
.male-course-document .male-intimacy-rich-content .recovery-orbit b {
  font-size: 14px;
  line-height: 1.4;
}

.male-course-document .male-intimacy-rich-content .course-visual small,
.male-course-document .male-intimacy-rich-content .visual small,
.male-course-document .male-intimacy-rich-content .supplement-visual small,
.male-course-document .male-intimacy-rich-content .orbit-route small,
.male-course-document .male-intimacy-rich-content .recovery-orbit small {
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .male-course-document .male-intimacy-rich-content,
  .male-course-document .male-intimacy-rich-content .male-course-page-fragment > p,
  .male-course-document .male-intimacy-rich-content .page-segment:not(.compact-page) > p,
  .male-course-document .male-intimacy-rich-content :not(.compact-page).template-body-map > p,
  .male-course-document .male-intimacy-rich-content :not(.compact-page).template-arousal-scale > p,
  .male-course-document .male-intimacy-rich-content :not(.compact-page).template-method-compare > p,
  .male-course-document .male-intimacy-rich-content :not(.compact-page).template-delay-practice > p {
    font-size: 16px;
    line-height: 1.85;
  }

  .male-course-document .male-intimacy-rich-content .bold-line,
  .male-course-document .male-intimacy-rich-content .page-segment > .bold-line,
  .male-course-document .male-intimacy-rich-content .quote > p,
  .male-course-document .male-intimacy-rich-content .quote p {
    font-size: 15.5px;
  }

  .male-course-document .male-intimacy-rich-content .course-visual :is(b, strong),
  .male-course-document .male-intimacy-rich-content .visual :is(b, strong),
  .male-course-document .male-intimacy-rich-content .supplement-visual :is(b, strong),
  .male-course-document .male-intimacy-rich-content .body-center,
  .male-course-document .male-intimacy-rich-content .hub-visual > div {
    font-size: 14px;
  }

  .male-course-document .male-intimacy-rich-content .course-visual :is(span, i, em),
  .male-course-document .male-intimacy-rich-content .visual :is(span, i, em),
  .male-course-document .male-intimacy-rich-content .supplement-visual :is(span, i, em),
  .male-course-document .male-intimacy-rich-content .body-map-visual span,
  .male-course-document .male-intimacy-rich-content .hub-visual span,
  .male-course-document .male-intimacy-rich-content .orbit-route b,
  .male-course-document .male-intimacy-rich-content .recovery-orbit b {
    font-size: 13px;
  }
}

.male-course-document .male-intimacy-rich-content .source-figure figcaption b {
  font-size: 14.5px;
}

/* level-head b was hard-coded white for the old solid band */
.male-course-document .male-intimacy-rich-content .arousal-levels .level-head b {
  background: transparent;
  color: #42604f;
}

/* --- Skin supplement: components missed in the first pass ------------------ */

/* dialogue-loop: solid wine band -> tinted quote-family band */
.male-course-document .male-intimacy-rich-content .dialogue-loop {
  border-left: 3px solid var(--wine-deep);
  border-radius: 0 12px 12px 0;
  background: rgba(116, 52, 71, 0.065);
  color: #4a2e38;
}

.male-course-document .male-intimacy-rich-content .dialogue-loop i {
  color: rgba(116, 52, 71, 0.55);
}

/* equation: keep it a statement, but on tint */
.male-course-document .male-intimacy-rich-content .equation {
  border-left: 3px solid var(--wine-deep);
  border-radius: 0 12px 12px 0;
  background: rgba(116, 52, 71, 0.065);
  color: var(--wine-deep);
  text-align: left;
}

.male-course-document .male-intimacy-rich-content .equation strong {
  color: var(--wine-deep);
}

/* component-label: small tag, tinted with hairline */
.male-course-document .male-intimacy-rich-content .component-label {
  border: 1px solid rgba(116, 52, 71, 0.3);
  border-radius: 999px;
  background: rgba(116, 52, 71, 0.07);
  color: var(--wine-deep);
}

/* profile-tree question row */
.male-course-document .male-intimacy-rich-content .profile-tree .tree-questions span {
  background: rgba(79, 104, 92, 0.08);
  color: #42604f;
}

/* car-response: pedals washed out on tint — add hairline + clearer type */
.male-course-document .male-intimacy-rich-content .car-response .pedal {
  border: 1px solid rgba(79, 104, 92, 0.26);
  border-radius: 10px;
}

.male-course-document .male-intimacy-rich-content .car-response .brake {
  border-color: rgba(116, 52, 71, 0.28);
}

.male-course-document .male-intimacy-rich-content .car-response small {
  color: #42604f;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.male-course-document .male-intimacy-rich-content .car-response .brake small {
  color: var(--wine-deep);
}

.male-course-document .male-intimacy-rich-content .car-response b {
  color: #3d332d;
  font-size: 13px;
}

/* chips that still read too faint: give them a hairline too */
.male-course-document .male-intimacy-rich-content .six-stage span,
.male-course-document .male-intimacy-rich-content .condom-steps span,
.male-course-document .male-intimacy-rich-content .feedback span,
.male-course-document .male-intimacy-rich-content .cases span,
.male-course-document .male-intimacy-rich-content .map-visual span,
.male-course-document .male-intimacy-rich-content .diagnosis-tree > div span,
.male-course-document .male-intimacy-rich-content .health-summary > section b,
.male-course-document .male-intimacy-rich-content .compare div,
.male-course-document .male-intimacy-rich-content .compare-move div,
.male-course-document .male-intimacy-rich-content .split-visual div,
.male-course-document .male-intimacy-rich-content .attention-visual div,
.male-course-document .male-intimacy-rich-content .sti-signal span,
.male-course-document .male-intimacy-rich-content .sensation-practice span,
.male-course-document .male-intimacy-rich-content .outer-steps span,
.male-course-document .male-intimacy-rich-content .postcoital-response span,
.male-course-document .male-intimacy-rich-content .spray-route span,
.male-course-document .male-intimacy-rich-content .desire-bridge span,
.male-course-document .male-intimacy-rich-content .pleasure-spectrum span,
.male-course-document .male-intimacy-rich-content .ga-summary span,
.male-course-document .male-intimacy-rich-content .referral-next span,
.male-course-document .male-intimacy-rich-content .mindful-core span {
  border: 1px solid rgba(74, 51, 43, 0.14);
  border-radius: 10px;
}

/* --- Legacy styles.css interference -----------------------------------------
   styles.css:657 white-cards every `.course-visual > span|div` at (0,2,2).
   Most chips are re-tinted above at higher specificity; the two components
   that must NOT be white-carded are fixed here. */

/* course-close: the one intentionally-solid finale strip */
.male-course-document .male-intimacy-rich-content .course-close span {
  flex: none;
  padding: 2mm 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff7ee;
}

.male-course-document .male-intimacy-rich-content .course-close span b {
  color: #fff7ee;
  font-size: 13.5px;
}

.male-course-document .male-intimacy-rich-content .course-close span small {
  margin-top: 3px;
  color: rgba(255, 247, 238, 0.78);
  font-size: 12.5px;
}

.male-course-document .male-intimacy-rich-content .course-close span:nth-of-type(2) b {
  color: #efd5ae;
}

/* knob-console cells: plain grid cells, no legacy white cards */
.male-course-document .male-intimacy-rich-content .knob-console > span {
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* four-lines: restore the accent edge the legacy border shorthand wiped */
.male-course-document .male-intimacy-rich-content .four-lines span {
  border-left: 3px solid var(--sage-deep);
  background: rgba(228, 235, 230, 0.68);
}

.male-course-document .male-intimacy-rich-content .four-lines span:last-child {
  border-left-color: var(--wine-deep);
}

/* env-visual / method-visual (.visual family, lessons 02-04): same light-card
   treatment the generated file only gave triple/capability/question */
.male-course-document .male-intimacy-rich-content .env-visual div,
.male-course-document .male-intimacy-rich-content .method-visual div {
  border: 1px solid #ded1bf;
  border-top: 3px solid var(--sage-deep);
  border-radius: 12px;
  background: rgba(79, 104, 92, 0.07);
  color: #3d332d;
}

.male-course-document .male-intimacy-rich-content .env-visual div:nth-child(2),
.male-course-document .male-intimacy-rich-content .method-visual div:nth-child(2) {
  border-top-color: var(--wine-deep);
  background: rgba(116, 52, 71, 0.06);
}

.male-course-document .male-intimacy-rich-content .env-visual span,
.male-course-document .male-intimacy-rich-content .method-visual span {
  color: #7c7168;
}

.male-course-document .male-intimacy-rich-content .env-visual b,
.male-course-document .male-intimacy-rich-content .method-visual b {
  color: #241b18;
}

/* ==========================================================================
   Landing page polish: hero chapter index + click affordances.
   ========================================================================== */

/* --- Hero: chapter index fills the empty right side (desktop only) --------- */
@media (min-width: 1101px) {
  .male-course-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    align-items: stretch;
  }

  .male-course-scene-topbar {
    grid-column: 1 / -1;
  }

  .male-course-scene-copy {
    align-self: end;
  }
}

.male-course-scene-index {
  display: none;
}

@media (min-width: 1101px) {
  .male-course-scene-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    padding: 0 34px 52px 0;
  }

  .male-course-scene-index button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 12px;
    padding: 15px 2px;
    border: 0;
    border-top: 1px solid rgba(255, 249, 241, 0.16);
    color: rgba(255, 249, 241, 0.66);
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: padding-left 160ms ease, color 160ms ease;
  }

  .male-course-scene-index button:hover {
    padding-left: 10px;
    color: #fff9f1;
  }

  .male-course-scene-index button > span {
    grid-column: 1 / -1;
    color: var(--male-copper-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
  }

  .male-course-scene-index button strong {
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .male-course-scene-index button small {
    font-size: 12px;
  }

  .male-course-scene-index button b {
    grid-row: 2 / 4;
    grid-column: 2;
    align-self: center;
    color: rgba(255, 249, 241, 0.4);
    font-weight: 400;
    transition: color 160ms ease, transform 160ms ease;
  }

  .male-course-scene-index button:hover b {
    color: var(--male-copper-soft);
    transform: translateX(3px);
  }
}

/* --- Question lane: visible click affordance -------------------------------- */
.male-course-question-lane nav button {
  position: relative;
  padding-right: 32px;
  transition: background 160ms ease;
}

.male-course-question-lane nav button::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--male-copper);
  font-size: 13px;
  opacity: 0.5;
  transition: opacity 160ms ease, transform 160ms ease;
}

.male-course-question-lane nav button:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* --- Chapter lesson rows: CTA pill reads clickable at rest ------------------- */
.male-course-chapter-panel li em {
  border-color: rgba(185, 111, 76, 0.32);
  color: var(--male-copper);
  background: rgba(185, 111, 76, 0.05);
}

.male-course-chapter-panel li > button > b {
  color: var(--male-copper);
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms ease;
}

.male-course-chapter-panel li > button:hover > b {
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .male-course-scene-index button,
  .male-course-scene-index button b,
  .male-course-question-lane nav button::after,
  .male-course-chapter-panel li > button > b {
    transition: none;
  }
}

/* ============================================================
   2026-08-25 参考站借鉴：水印背景大字 / 印章式编号 / 信任脚注
   ============================================================ */

/* hero 竖排衬线水印（知己 / 知她 / 同行），压在所有内容之下 */
.male-course-scene-watermark {
  position: absolute;
  top: 50%;
  right: 3.5%;
  z-index: -1;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.6vw, 40px);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.male-course-scene-watermark span {
  writing-mode: vertical-rl;
  color: rgba(255, 249, 241, 0.04);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(72px, 9.5vw, 132px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
}

/* 桌面端右侧是章节速览列，水印移到它左边，避免压住文字 */
@media (min-width: 1101px) {
  .male-course-scene-watermark {
    right: min(340px, 30%);
  }
}

.male-course-scene-watermark span:nth-child(2) {
  margin-top: 34px;
}

.male-course-scene-watermark span:nth-child(3) {
  margin-top: 68px;
}

/* 手机端不叠水印，保持 hero 干净 */
@media (max-width: 720px) {
  .male-course-scene-watermark {
    display: none;
  }
}

/* 章节编号：圆形描边 → 方形印章（铜色细描边 + 内描边 + 衬线数字） */
.male-course-chapter-rail > nav > button > span,
.male-course-toolbox-entry > span {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(185, 111, 76, 0.5);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(185, 111, 76, 0.16);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.male-course-chapter-rail > nav > button.is-active > span {
  border-color: rgba(185, 111, 76, 0.75);
  background: rgba(185, 111, 76, 0.07);
}

/* 章节面板 "PART 01" 同款印章 chip */
.male-course-chapter-panel > header small {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border: 1px solid rgba(185, 111, 76, 0.42);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(185, 111, 76, 0.12);
}

/* 阅读器目录编号统一为印章 chip */
.male-course-reader-curriculum nav button b {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(185, 111, 76, 0.45);
  border-radius: 6px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 11px;
}

/* footer 信任脚注 */
.male-course-experience-footer-note {
  color: #a8988c;
  font-size: 12px;
}

.male-course-document .male-intimacy-rich-content .car-response small,
.male-course-document .male-intimacy-rich-content .course-close span small {
  font-size: 13px;
  line-height: 1.45;
}

.male-course-document .male-intimacy-rich-content .car-response b,
.male-course-document .male-intimacy-rich-content .course-close span b {
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .male-course-experience-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ========== 目录页刊头 v2：撤掉深色大海报，浅色刊头 + 有进度时的细深色续学条 ========== */
/* 旧 .male-course-scene / 水印 / 章节速览样式随 markup 移除而闲置，保留不碍事。 */

.male-course-masthead {
  padding: 6px 4px 0;
  color: #362a23;
}

.male-course-masthead-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(118, 94, 78, 0.18);
  color: rgba(54, 42, 35, 0.72);
}

.male-course-masthead-topbar span {
  font-size: 12.5px;
  letter-spacing: 0.18em;
}

.male-course-masthead-topbar button {
  width: fit-content;
  padding: 6px 0;
  border: 0;
  color: inherit;
  font-size: 13px;
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease;
}

.male-course-masthead-topbar button:last-child {
  justify-self: end;
}

.male-course-masthead-topbar button:hover {
  color: var(--male-copper, #b96f4c);
}

.male-course-masthead-copy {
  position: relative;
  padding: 26px 0 4px;
}

.male-course-masthead-copy > small {
  color: var(--male-copper, #b96f4c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.male-course-masthead-copy h1 {
  margin: 12px 0 12px;
  color: #2c221c;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.male-course-masthead-copy h1 em {
  font-style: normal;
  color: var(--male-copper, #b96f4c);
}

.male-course-masthead-copy > p {
  max-width: 640px;
  margin: 0;
  color: rgba(54, 42, 35, 0.78);
  font-size: 14.5px;
  line-height: 1.85;
}

.male-course-material-download {
  position: absolute;
  top: 26px;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  width: min(260px, 28vw);
  padding: 16px 18px;
  color: #362a23;
  text-decoration: none;
  border: 1px solid rgba(185, 111, 76, 0.35);
  border-radius: 14px;
  background: rgba(255, 251, 246, 0.78);
  box-shadow: 0 10px 26px rgba(61, 39, 29, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.male-course-material-download span {
  grid-column: 1 / -1;
  color: var(--male-copper, #b96f4c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.male-course-material-download strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 16px;
  font-weight: 600;
}

.male-course-material-download small {
  align-self: center;
  color: rgba(54, 42, 35, 0.62);
  font-size: 11px;
  white-space: nowrap;
}

.male-course-material-download:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 111, 76, 0.62);
  box-shadow: 0 14px 30px rgba(61, 39, 29, 0.12);
}

button.male-course-material-download {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.male-course-access-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(185, 111, 76, 0.36);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.88);
  box-shadow: 0 12px 30px rgba(61, 39, 29, 0.07);
}

.male-course-access-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.male-course-access-panel small {
  color: var(--male-copper, #b96f4c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.male-course-access-panel strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 17px;
}

.male-course-access-panel span {
  color: rgba(54, 42, 35, 0.68);
  font-size: 13px;
}

.male-course-access-panel > div:last-child {
  display: flex;
  gap: 10px;
  flex: none;
}

.male-course-access-panel a,
.male-course-access-panel button {
  padding: 10px 15px;
  color: #fff9f1;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #3b2a22;
  border-radius: 999px;
  background: #3b2a22;
  cursor: pointer;
}

.male-course-access-panel button + button {
  color: #3b2a22;
  border-color: rgba(59, 42, 34, 0.24);
  background: transparent;
}

/* 续学条：深色一小块，是深色在这页留下的唯一印记；无进度时不渲染。 */
.male-course-resume {
  margin-top: 20px;
}

.male-course-resume button {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 14px;
  color: #fff9f1;
  text-align: left;
  background: linear-gradient(115deg, #1c1411 0%, #2a1c16 60%, #1a1311 100%);
  box-shadow: 0 12px 30px rgba(44, 27, 20, 0.16);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.male-course-resume button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(44, 27, 20, 0.2);
}

.male-course-resume small {
  flex: none;
  color: var(--male-copper-soft, #d9a583);
  font-size: 12px;
  letter-spacing: 0.14em;
}

.male-course-resume strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 16px;
  font-weight: 600;
}

.male-course-resume span {
  color: rgba(255, 249, 241, 0.62);
  font-size: 12.5px;
}

.male-course-resume b {
  margin-left: auto;
  flex: none;
  color: var(--male-copper-soft, #d9a583);
  font-size: 13px;
  font-weight: 700;
}

/* 问题入口条不再挂在海报下沿，恢复独立卡片。 */
.male-course-question-lane {
  margin: 22px 0 0;
  border-top: 1px solid rgba(118, 94, 78, 0.16);
  border-color: rgba(118, 94, 78, 0.16);
  border-radius: 18px;
}

@media (max-width: 720px) {
  .male-course-masthead {
    padding: 2px 0 0;
  }

  .male-course-masthead-copy {
    padding: 28px 0 8px;
  }

  /* 刊头呼吸感：眉题/标题/导语/CTA 逐级拉开 */
  .male-course-masthead-copy > small {
    font-size: 11px;
    letter-spacing: 0.26em;
  }

  .male-course-masthead-copy h1 {
    margin: 16px 0 16px;
    line-height: 1.45;
  }

  .male-course-masthead-copy > p {
    line-height: 1.95;
  }

  .male-course-unlock-cta {
    margin-top: 22px;
  }

  .male-course-material-download {
    position: static;
    width: 100%;
    margin-top: 18px;
  }

  .male-course-access-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .male-course-access-panel > div:last-child,
  .male-course-access-panel a,
  .male-course-access-panel button {
    width: 100%;
  }

  .male-course-access-panel a,
  .male-course-access-panel button {
    text-align: center;
  }

  .male-course-resume button {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 14px 16px;
  }

  .male-course-resume strong {
    flex-basis: 100%;
    order: 2;
  }

  .male-course-resume b {
    order: 3;
  }

  .male-course-question-lane {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .male-course-masthead-topbar button,
  .male-course-material-download,
  .male-course-resume button {
    transition: none;
  }

  .male-course-material-download:hover,

  .male-course-resume button:hover {
    transform: none;
  }
}


/* 已解锁资料下载条：替代原购买横幅的解锁态，付款后取 PDF 的明确入口。 */
.male-course-download-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(185, 111, 76, 0.36);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.88);
  box-shadow: 0 12px 30px rgba(61, 39, 29, 0.07);
}

.male-course-download-band > div {
  display: grid;
  gap: 4px;
}

.male-course-download-band small {
  color: var(--male-copper, #b96f4c);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.male-course-download-band strong {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 17px;
}

.male-course-download-band span {
  color: rgba(54, 42, 35, 0.68);
  font-size: 13px;
}

.male-course-download-band a {
  flex: none;
  padding: 11px 18px;
  color: #fff9f1;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  background: #3b2a22;
  transition: background 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .male-course-download-band a:hover {
    background: #241811;
  }
}

@media (max-width: 720px) {
  .male-course-download-band {
    align-items: stretch;
    flex-direction: column;
  }

  .male-course-download-band a {
    text-align: center;
  }
}


/* ============================================================
   2026-09-01 手机端目录重构（二版）：去框、去横滑、去页签
   问题入口 → 发丝线文字行；章节 → 纵向手风琴（仅 ≤820px 显示）
   桌面端仍用 male-course-workbench 工作台，toc 默认隐藏
   ============================================================ */
.male-course-toc {
  display: none;
}
@media (max-width: 820px) {
  /* 问题入口：四行发丝线列表，与课时列表同一语言 */
  .male-course-question-lane {
    padding: 26px 18px 6px;
  }

  .male-course-question-lane nav {
    display: block;
    margin-top: 12px;
    overflow: visible;
    border-top: 1px solid var(--male-line);
  }

  .male-course-question-lane nav button {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    padding: 15px 26px 15px 2px;
    border: 0;
    border-bottom: 1px solid var(--male-line);
    border-radius: 0;
    background: none;
    text-align: left;
  }

  .male-course-question-lane nav button::after {
    top: 50%;
    right: 2px;
    bottom: auto;
    transform: translateY(-50%);
  }

  .male-course-question-lane nav button:hover::after {
    transform: translateY(-50%) translateX(2px);
  }

  .male-course-question-lane nav span {
    font-size: 16.5px;
  }

  .male-course-question-lane nav small {
    flex: none;
    font-size: 12px;
  }

  /* 眉题与目录刊头同一语言：铜色小字 + 短线 */
  .male-course-question-lane > div small {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.3em;
  }

  .male-course-question-lane > div small::after {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }

  .male-course-question-lane > div strong {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 600;
  }

  /* 章节目录：纵向手风琴，章行点开即见课时，无页签无横滑 */
  .male-course-workbench {
    display: none;
  }

  .male-course-toc {
    display: block;
    padding: 8px 0 34px;
  }

  /* 刊头：字距小引 + 短铜线 + 大衬线标题，先立住气质 */
  .male-course-toc > header {
    padding: 20px 20px 24px;
  }

  .male-course-toc > header small {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--male-copper);
    font-size: 10px;
    letter-spacing: 0.38em;
  }

  .male-course-toc > header small::after {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
  }

  .male-course-toc > header strong {
    display: block;
    margin: 10px 0 8px;
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .male-course-toc > header p {
    margin: 0;
    color: var(--male-muted);
    font-size: 12.5px;
    line-height: 1.75;
  }

  /* 章节行：大号浅色衬线编号 + 标题/节数双行，右侧细线十字 */
  .male-course-toc__group {
    border-top: 1px solid var(--male-line);
    transition: background 200ms ease;
  }

  .male-course-toc__group.is-open {
    background: linear-gradient(180deg, rgba(185, 111, 76, 0.055), rgba(185, 111, 76, 0.018) 72%, transparent);
  }

  .male-course-toc__group > button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 64px;
    padding: 20px 20px 18px;
    border: 0;
    background: none;
    text-align: left;
  }

  .male-course-toc__group > button > span {
    flex: none;
    width: 36px;
    color: var(--male-copper);
    opacity: 0.72;
    font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .male-course-toc__group.is-open > button > span {
    opacity: 1;
  }

  .male-course-toc__group > button > div {
    flex: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .male-course-toc__group > button strong {
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    font-size: 19.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .male-course-toc__group > button small {
    color: var(--male-muted);
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  /* 细线十字：展开时竖线收起，变成"—" */
  .male-course-toc__group > button > b {
    position: relative;
    flex: none;
    width: 13px;
    height: 13px;
  }

  .male-course-toc__group > button > b::before,
  .male-course-toc__group > button > b::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 13px;
    height: 1px;
    background: var(--male-copper);
  }

  .male-course-toc__group > button > b::after {
    transform: rotate(90deg);
    transition: transform 180ms ease;
  }

  .male-course-toc__group.is-open > button > b::after {
    transform: rotate(0deg);
  }

  .male-course-toc__body {
    display: none;
    padding: 2px 20px 26px;
  }

  .male-course-toc__group.is-open .male-course-toc__body {
    display: block;
  }

  /* 摘要对齐标题列，形成编辑排版的对位关系 */
  .male-course-toc__summary {
    margin: 0 0 16px 52px;
    color: var(--male-muted);
    font-size: 13px;
    line-height: 1.8;
  }

  .male-course-toc__body ol {
    border-top: 1px solid var(--male-line);
  }

  .male-course-toc__body li > button {
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 16px 2px;
  }

  .male-course-toc__body li > button > span {
    color: var(--male-copper);
    opacity: 0.8;
    font-size: 14px;
    font-weight: 400;
  }

  .male-course-toc__body li strong {
    font-size: 16.5px;
  }

  .male-course-toc__body li p {
    margin-top: 3px;
    font-size: 12.5px;
  }

  @media (prefers-reduced-motion: reduce) {
    .male-course-toc__group,
    .male-course-toc__group > button > b::after {
      transition: none;
    }
  }
}


/* ============================================================
   2026-09-02 未解锁落地页改版：
   封面视觉立住身份 + 真实试读建立信任 + 三章结构一目了然 + 吸底 CTA
   ============================================================ */

/* 刊头主视觉：不用贴图，用深色块立住男性课程气质，标题/导语/CTA 一眼聚焦 */
.male-course-hero {
  margin-top: 22px;
}

.male-course-hero .male-course-masthead-copy {
  padding: 34px 30px 36px;
  border-radius: 18px;
  background: linear-gradient(158deg, #2c1e17 0%, #211510 78%);
  box-shadow: 0 22px 48px rgba(43, 28, 20, 0.22);
}

.male-course-hero .male-course-masthead-copy > small {
  color: var(--male-copper-soft);
}

.male-course-hero .male-course-masthead-copy h1 {
  color: #f6ecdd;
  font-size: clamp(26px, 3.4vw, 38px);
}

.male-course-hero .male-course-masthead-copy h1 em {
  color: var(--male-copper-soft);
  white-space: nowrap;
}

.male-course-hero .male-course-masthead-copy > p {
  max-width: 560px;
  color: rgba(246, 236, 221, 0.74);
}

.male-course-hero .male-course-unlock-cta {
  margin-top: 24px;
}

/* 试读：浅暖色块与深色刊头拉开节奏，给一段真实正文，底部渐隐，按钮接着读 */
.male-course-preview {
  margin-top: 30px;
  padding: 24px 24px 16px;
  border-radius: 16px;
  background: #f4ecdf;
}

.male-course-preview > small {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--male-copper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.male-course-preview > small::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.male-course-preview h2 {
  margin: 12px 0 10px;
  color: #2c221c;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.4;
}

.male-course-preview-excerpt {
  max-height: 7.6em;
  margin: 0;
  overflow: hidden;
  color: rgba(54, 42, 35, 0.82);
  font-size: 14.5px;
  line-height: 1.95;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 98%);
}

.male-course-preview > button {
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  color: var(--male-copper);
  font-size: 14px;
  font-weight: 600;
  background: none;
  cursor: pointer;
  transition: color 140ms ease;
}

.male-course-preview > button:hover {
  color: #9c5636;
}

/* 三章结构（未解锁）：发丝线行，不再铺开 11 节课时 */
.male-course-locked-map {
  margin-top: 30px;
  padding-bottom: 6px;
}

.male-course-locked-map > header {
  padding: 0 0 14px;
}

.male-course-locked-map > header small {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--male-copper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.male-course-locked-map > header small::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.male-course-locked-map > header strong {
  display: block;
  margin: 10px 0 6px;
  color: #2c221c;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
}

.male-course-locked-map > header p {
  margin: 0;
  color: rgba(54, 42, 35, 0.62);
  font-size: 13px;
  line-height: 1.8;
}

.male-course-locked-part {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  width: 100%;
  padding: 17px 4px;
  border: 0;
  border-bottom: 1px solid var(--male-line);
  color: #362a23;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

.male-course-locked-part:first-of-type {
  border-top: 1px solid var(--male-line);
}

.male-course-locked-part:hover {
  background: rgba(185, 111, 76, 0.05);
}

.male-course-locked-part > span {
  color: var(--male-copper);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 20px;
}

.male-course-locked-part strong {
  display: block;
  color: #241a14;
  font-size: 17px;
  font-weight: 700;
}

.male-course-locked-part p {
  margin: 4px 0 0;
  color: rgba(54, 42, 35, 0.6);
  font-size: 12.5px;
  line-height: 1.7;
}

.male-course-locked-part em {
  flex: none;
  color: rgba(54, 42, 35, 0.52);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

/* 收尾：一句安心话 + 第二次解锁入口 */
.male-course-closing-band {
  margin: 36px 0 8px;
  padding: 30px 0 6px;
  border-top: 1px solid var(--male-line);
  text-align: center;
}

.male-course-closing-band p {
  margin: 0;
  color: rgba(54, 42, 35, 0.66);
  font-size: 13.5px;
  line-height: 1.9;
}

.male-course-closing-band .male-course-unlock-cta {
  margin-top: 16px;
}

/* 手机端吸底解锁条：未解锁时随屏可见 */
.male-course-sticky-cta {
  display: none;
}

@media (max-width: 820px) {
  .male-course-hero {
    margin-top: 16px;
  }

  .male-course-hero .male-course-masthead-copy {
    padding: 26px 22px 30px;
  }

  .male-course-sticky-cta {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--male-line);
    background: rgba(248, 243, 236, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .male-course-sticky-cta button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    background: #2b211c;
    color: #f5ede4;
    cursor: pointer;
  }

  .male-course-sticky-cta strong {
    font-size: 15px;
    font-weight: 600;
  }

  .male-course-sticky-cta span {
    color: rgba(245, 237, 228, 0.66);
    font-size: 11.5px;
  }

  /* 吸底条占位，避免挡住页脚 */
  .male-course-experience-page .male-course-experience-footer {
    padding-bottom: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .male-course-locked-part,
  .male-course-preview > button {
    transition: none;
  }
}