.yishudao-page {
  --violet: #7147c8;
  --violet-deep: #34215c;
  --mint: #8fae91;
  --cream: #fffaf0;
  background:
    radial-gradient(circle at 88% 2%, rgba(113, 71, 200, .17), transparent 30rem),
    radial-gradient(circle at 5% 44%, rgba(187, 133, 55, .11), transparent 28rem),
    var(--paper);
}
.yishudao-page .hero { min-height: auto; padding-bottom: clamp(76px, 10vw, 128px); }
.yishudao-page h1 { color: var(--violet-deep); }
.yishudao-page .eyebrow { color: var(--violet); }
.island-visual {
  min-height: 590px;
  position: relative;
  justify-self: stretch;
}
.island-visual img {
  position: absolute;
  display: block;
  height: auto;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(52, 33, 92, .18);
}
.island-visual .island-icon {
  z-index: 3;
  width: 62%;
  left: 19%;
  top: 17%;
  border: 10px solid rgba(255,255,255,.8);
  border-radius: 31%;
  transform: rotate(-2deg);
}
.island-visual .body-peek,
.island-visual .backpack-peek {
  width: 39%;
  height: 48%;
  border: 7px solid rgba(255,255,255,.75);
  border-radius: 28px;
}
.island-visual .body-peek { left: 0; top: 2%; transform: rotate(-8deg); }
.island-visual .backpack-peek { right: 0; bottom: 1%; transform: rotate(8deg); }
.section { padding: clamp(76px, 10vw, 124px) 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, .55fr) minmax(320px, 1fr); gap: 48px; margin-bottom: 46px; align-items: end; }
.section-kicker { color: var(--violet); font-size: 13px; font-weight: 800; letter-spacing: .13em; }
.section h2 { margin: 12px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(38px, 5.5vw, 68px); font-weight: 500; line-height: 1.05; letter-spacing: -.05em; }
.section-intro { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.85; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path-card { overflow: hidden; min-height: 560px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.9); border-radius: 34px; background: rgba(255,255,255,.58); box-shadow: 0 24px 70px rgba(52,33,92,.07); }
.path-card-copy { padding: 30px 30px 24px; }
.path-number { color: var(--violet); font-size: 12px; font-weight: 820; letter-spacing: .14em; }
.path-card h3 { margin: 14px 0 10px; font-size: 28px; line-height: 1.2; }
.path-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.path-media { min-height: 310px; margin-top: auto; position: relative; overflow: hidden; background: #efe8f8; }
.path-media > img { display: block; width: 100%; height: 100%; min-height: 310px; object-fit: cover; object-position: center 24%; }
.path-media.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.path-media.duo img { display: block; width: 100%; height: 100%; min-height: 310px; object-fit: cover; }
.path-media.duo img:first-child { object-position: center 34%; }
.path-media.duo img:last-child { object-position: center 22%; }
.path-media.card-reveal { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 42%, #fff9e9, #e8ddf5); }
.current-memory-card { position: relative; width: min(76%, 250px); aspect-ratio: 3 / 4; overflow: hidden; border: 6px solid rgba(255,255,255,.9); border-radius: 28px; background: linear-gradient(155deg, #fffdf8, #f2eee5); box-shadow: 0 22px 48px rgba(52,33,92,.2); transform: rotate(1.5deg); }
.current-memory-card .card-number { position: absolute; z-index: 2; top: 5%; left: 6%; width: 34%; height: auto; }
.current-memory-card .card-resident { position: absolute; inset: 16% 3% 15%; width: 94%; height: 69%; object-fit: contain; }
.current-memory-card .card-answer { position: absolute; z-index: 3; right: 7%; bottom: 5%; left: 7%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 13px; border: 1px solid rgba(74,66,55,.1); border-radius: 16px; color: #3c382f; background: rgba(255,253,248,.93); box-shadow: 0 9px 24px rgba(54,47,38,.1); font-size: 13px; font-weight: 760; }
.current-memory-card .card-audio { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--violet); font-size: 14px; }
.rhythm-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(44px, 8vw, 90px); padding: clamp(34px, 6vw, 68px); border-radius: 38px; color: #faf7ee; background: var(--violet-deep); }
.rhythm-panel h2 { margin-top: 10px; }
.rhythm-list { display: grid; gap: 12px; }
.rhythm-item { padding: 20px 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.06); }
.rhythm-item strong { display: block; margin-bottom: 6px; font-size: 18px; }
.rhythm-item span { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; }
.signup { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: clamp(70px, 10vw, 112px) 0; }
.signup h2 { margin: 0 0 14px; font-family: Georgia, "Songti SC", serif; font-size: clamp(36px, 5vw, 62px); font-weight: 500; letter-spacing: -.05em; }
.signup p { max-width: 660px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.signup .cta { flex: 0 0 auto; }
@media (max-width: 860px) {
  .island-visual { min-height: 500px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 0; display: grid; grid-template-columns: .8fr 1.2fr; }
  .path-media { min-height: 360px; margin: 0; }
  .path-media > img, .path-media.duo img { min-height: 360px; }
  .current-memory-card { width: min(72%, 260px); }
  .rhythm-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .yishudao-page .hero { gap: 24px; padding-bottom: 76px; }
  .island-visual { min-height: 390px; }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .path-card { display: flex; }
  .path-media { min-height: 300px; }
  .path-media > img, .path-media.duo img { min-height: 300px; }
  .current-memory-card { width: min(72%, 230px); }
  .rhythm-panel { padding: 30px 22px; border-radius: 28px; }
  .signup { align-items: stretch; flex-direction: column; }
  .signup .cta { align-self: flex-start; }
}