/* Alternative A: a warm lifestyle journal. Shared content, independent styling. */
.magazine {
  --bg: #f8fbf6;
  --surface: #eef5ea;
  --surface-green: #e4f1df;
  --ink: #243d2b;
  --muted: #596d5c;
  --accent: #237b37;
  --accent-hover: #195d2a;
  --line: #cedfca;
}
.magazine header { background: #f8fbf6f5; }
.magazine .brand { color: #245d32; }
.preview-bar { background: #e5f0df; color: #50664f; font-size: 12px; letter-spacing: .08em; }
.preview-bar .wrap { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 38px; }
.preview-bar a { padding-block: 7px; }
.magazine h2 { font-family: "Songti SC", "STSong", serif; font-weight: 600; }
.magazine .hero { grid-template-columns: 1.05fr 1fr; gap: 40px; padding: 48px 0 62px; min-height: 570px; }
.magazine .hero-copy { position: relative; z-index: 2; padding: 0 0 32px; }
.magazine .hero h1 { color: #245d32; font-size: clamp(42px,4.8vw,66px); line-height: 1.4; }
.magazine .hero h1::after { content: ""; display: block; width: 56px; height: 3px; background: #2da341; margin-top: 24px; }
.magazine .hero-copy > p { max-width: 27em; }
.magazine .hero .cover-photo { padding: 0; margin-left: -12px; transform: rotate(2deg); }
.magazine .hero figure::before { display: none; }
.magazine .hero .cover-photo img { border-radius: 2px; height: 425px; }
.magazine .hero .cover-photo figcaption { margin-top: 10px; font-size: 11px; padding-left: 150px; }
.magazine .hero .cover-detail { position: absolute; right: 30%; bottom: 22px; width: 170px; margin: 0; padding: 8px 8px 6px; background: #ffffff; transform: rotate(-7deg); box-shadow: 0 8px 20px #234d2918; }
.magazine .hero .cover-detail img { height: 132px; border-radius: 0; object-position: 65% center; }
.magazine .hero .cover-detail figcaption { margin-top: 5px; font-size: 10px; }
.magazine .btn { border-radius: 2px; }
.magazine .btn.secondary { border: 0; padding-inline: 4px; text-decoration: underline; background: transparent; }
.magazine .notice { background: #eaf3e4; }
.magazine .notice .wrap { border: 0; }
.magazine .section { padding-block: 70px; }
.magazine .intro { grid-template-columns: .8fr 1.2fr; gap: 60px; }
.magazine .intro h2 { color: #237b37; font-size: 35px; }
.magazine .intro .lead { font-family: "Songti SC", "STSong", serif; font-size: 25px; }
.magazine #learn { background: #eaf4e4; }
.magazine #learn > .wrap { grid-template-columns: 1.1fr 1fr; gap: 60px; }
.magazine #learn .section-photo img { height: 310px; border-radius: 2px; }
.magazine #learn .section-head h2 { color: #245d32; }
.magazine .course { padding-block: 21px; border-color: #c8dbc2; }
.magazine .course:first-child { padding-top: 0; }
.magazine .tag { font-size: 12px; letter-spacing: .03em; }
.magazine .course h3 { font-family: "Songti SC", "STSong", serif; font-size: 26px; }
.magazine .camps { border: 0; }
.magazine .camps-layout { grid-template-columns: .8fr 1.2fr; gap: 56px; }
.magazine .camps-intro { border: 0; padding: 0; }
.magazine .camps-intro h2 { color: #237b37; }
.magazine .camp-lead { color: #245d32; font-family: "Songti SC", "STSong", serif; font-size: 28px; }
.magazine .camp-list { gap: 0 28px; }
.magazine .camp-item:first-child { background: #dcefd4; border-radius: 0; padding: 30px; }
.magazine .camp-item h3 { font-family: "Songti SC", "STSong", serif; }
.magazine .teachers { background: #edf5e8; border: 0; }
.magazine .teachers .section-head { display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap; margin-bottom: 8px; }
.magazine .teachers .section-head h2 { margin-bottom: 0; }
.magazine .teacher-profile { grid-template-columns: 140px 1fr; gap: 24px; padding: 26px 0 0; border-color: #c7dac1; }
.magazine .portrait-placeholder { width: auto; min-height: 200px; border-radius: 0; border: 1px solid #b6cfae; background: #dfecd9; color: #426448; }
.magazine .teacher-bio h3 { font-family: "Songti SC", "STSong", serif; }
.magazine .space-layout { grid-template-columns: 1.15fr 1fr; gap: 60px; }
.magazine .space-scene { border-radius: 0; background: transparent; overflow: visible; }
.magazine .space-scene .section-photo img { height: 330px; border-radius: 0; }
.magazine .space-scene .section-photo figcaption { margin: 8px 0 0; }
.magazine .quote { position: relative; margin: 18px 0 0 36px; padding: 20px 24px; background: #e0eed8; color: #426448; font-family: "Songti SC", "STSong", serif; font-size: 25px; }
.magazine .space h2 { color: #245d32; }
.magazine #goods { padding-top: 10px; }
.magazine .goods { grid-template-columns: .75fr 1.25fr; }
.magazine .goods h2 { color: #237b37; }
.magazine .goods-item:nth-child(2) { padding-top: 52px; }
.magazine .goods-item .section-photo img { border-radius: 0; height: 260px; }
.magazine .goods-item h3 { font-family: "Songti SC", "STSong", serif; }
.magazine .charity { background: #e0efda; color: var(--ink); }
.magazine .charity-intro .charity-statement { color: #245d32; }
.magazine .charity-intro .muted, .magazine .charity-intro .tag { color: #526c54; }
.magazine .charity-intro .text-link { color: #237b37; }
.magazine .charity-project { background: #f8fbf6; border-radius: 0; border-top: 3px solid #81ad74; }
.magazine #events { background: var(--bg); }
.magazine .event { background: #e4f1dd; border: 0; border-radius: 0; padding: 30px; }
.magazine .event:nth-of-type(2) { background: #eef6e9; }
.magazine .event h3 { font-family: "Songti SC", "STSong", serif; }
.magazine .contact { background: #e8f3e1; }
.magazine .contact h2 { color: #245d32; }
.magazine footer { background: #dcebd5; }
@media (min-width: 641px) and (max-width: 1100px) {
  .magazine .hero { gap: 28px; min-height: 520px; }
  .magazine .hero h1 { font-size: 43px; }
  .magazine .hero .cover-photo img { height: 380px; }
  .magazine .hero .cover-detail { width: 136px; right: 29%; }
  .magazine .hero .cover-detail img { height: 108px; }
  .magazine .intro, .magazine #learn > .wrap, .magazine .space-layout { gap: 32px; }
  .magazine .camps-layout { grid-template-columns: 1fr; gap: 28px; }
  .magazine .camp-list { grid-template-columns: 1.2fr 1fr 1fr; gap: 22px; }
  .magazine .camp-item:first-child { padding: 24px; }
  .magazine .teacher-profile { grid-template-columns: 110px 1fr; gap: 18px; }
  .magazine .portrait-placeholder { min-height: 160px; padding: 12px; }
  .magazine .goods { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .preview-bar { font-size: 11px; letter-spacing: 0; }
  .magazine .hero { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 62px; min-height: auto; }
  .magazine .hero-copy { padding: 0; }
  .magazine .hero h1 { font-size: clamp(36px,9.5vw,49px); margin-bottom: 18px; }
  .magazine .hero h1::after { margin-top: 18px; }
  .magazine .hero .cover-photo { margin: 0 0 0 24px; transform: rotate(1deg); }
  .magazine .hero .cover-photo img { height: 285px; }
  .magazine .hero .cover-detail { width: 118px; right: auto; left: 0; bottom: 26px; padding: 6px; }
  .magazine .hero .cover-detail img { height: 98px; }
  .magazine .hero .cover-photo figcaption { padding-left: 102px; min-height: 35px; }
  .magazine .section { padding-block: 46px; }
  .magazine .intro, .magazine #learn > .wrap, .magazine .camps-layout, .magazine .space-layout, .magazine .goods { grid-template-columns: 1fr; gap: 26px; }
  .magazine .intro h2 { font-size: 29px; }
  .magazine .intro .lead { font-size: 23px; }
  .magazine #learn .section-photo img { height: 240px; }
  .magazine .course:first-child { padding-top: 22px; }
  .magazine .camp-lead { font-size: 25px; }
  .magazine .camp-item:first-child { padding: 24px; }
  .magazine .teacher-profile { grid-template-columns: 104px 1fr; gap: 20px; }
  .magazine .portrait-placeholder { min-height: 154px; }
  .magazine .teachers .section-head { gap: 12px; }
  .magazine .space-scene .section-photo img { height: 260px; }
  .magazine .quote { margin-left: 22px; font-size: 23px; }
  .magazine #goods { padding-top: 8px; }
  .magazine .goods-item:nth-child(2) { padding-top: 24px; }
  .magazine .goods-item .section-photo img { height: 210px; }
  .magazine .event { padding: 24px; }
}
@media (max-width: 420px) {
  .magazine .goods-list { grid-template-columns: 1fr 1fr; gap: 18px; }
  .magazine .goods-item .section-photo img { height: 175px; }
  .magazine .goods-item h3 { font-size: 20px; }
}
@media (max-width: 360px) {
  .magazine .teacher-profile { grid-template-columns: 1fr; }
  .magazine .portrait-placeholder { width: 120px; }
  .magazine .goods-list { grid-template-columns: 1fr; }
}

/* One teacher: an editorial profile, not a team directory. */
.single-teacher { display:grid; grid-template-columns:.7fr 1.3fr; gap:64px; align-items:center; }
.teacher-intro h2 { margin:12px 0 18px; }
.teacher-feature { display:grid; grid-template-columns:.75fr 1fr; gap:32px; align-items:center; }
.magazine .teacher-feature .portrait-placeholder { min-height:285px; outline:1px solid #b6cfae; outline-offset:-10px; }
.teacher-feature .teacher-bio h3 { font-size:30px; }
.teacher-feature .teacher-bio>p { font-size:15px; }
.breadcrumb { display:flex; gap:14px; font-size:13px; color:var(--muted); padding:28px 0; }
.breadcrumb a { min-height:32px; }
.teacher-cover { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; padding:16px 0 64px; }
.magazine .teacher-portrait .portrait-placeholder { min-height:430px; background:#e4f0df; border:1px solid #b6cfae; outline:1px solid #b6cfae; outline-offset:-16px; }
.teacher-portrait>p { margin:12px 0 0; }
.teacher-opening h1 { font-family:"Songti SC","STSong",serif; color:#245d32; font-size:clamp(36px,4vw,54px); line-height:1.45; margin:18px 0 26px; }
.teacher-opening h2 { font-size:26px; margin-bottom:10px; }
.teacher-deck { border-left:2px solid #2da341; padding-left:20px; margin-top:24px; }
.teacher-opening .section-note { margin-bottom:4px; }
.teacher-story { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; padding:56px 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.story-heading h2 { font-size:31px; margin-top:16px; }
.story-content section { padding:24px 0; border-bottom:1px solid var(--line); }
.story-content section:first-child { padding-top:0; }
.story-content h3 { font-family:"Songti SC","STSong",serif; font-size:24px; margin-bottom:12px; }
.story-content p { color:var(--muted); margin:0; }
.teacher-next { background:#eaf4e4; padding:36px; margin-bottom:64px; display:flex; gap:32px; align-items:center; justify-content:space-between; }
.teacher-next h2 { font-size:30px; margin:12px 0; }
.teacher-next p { max-width:32em; margin:0; }
.teacher-next .actions { margin:0; flex-shrink:0; flex-direction:column; align-items:flex-start; }
.nav a[aria-current="page"] { color:var(--accent); text-decoration:underline; }
@media(max-width:1100px) {
 .single-teacher { grid-template-columns:1fr; gap:24px; }
 .teacher-feature { grid-template-columns:220px 1fr; }
 .teacher-cover,.teacher-story { gap:40px; }
 .magazine .teacher-portrait .portrait-placeholder { min-height:380px; }
}
@media(max-width:640px) {
 .teacher-feature { grid-template-columns:110px 1fr; gap:22px; align-items:start; }
 .magazine .teacher-feature .portrait-placeholder { min-height:170px; outline-offset:-6px; }
 .teacher-feature .teacher-bio h3 { font-size:23px; }
 .teacher-cover,.teacher-story { grid-template-columns:1fr; gap:28px; padding-block:12px 36px; }
 .teacher-cover { display:flex; flex-direction:column-reverse; align-items:stretch; }
 .magazine .teacher-portrait .portrait-placeholder { min-height:280px; }
 .teacher-opening h1 { font-size:39px; margin-block:14px 22px; }
 .teacher-story { padding-top:36px; }
 .teacher-next { padding:26px; margin-bottom:40px; flex-direction:column; align-items:stretch; gap:24px; }
 .teacher-next h2 { font-size:27px; }
 .teacher-next .actions { flex-direction:row; flex-wrap:wrap; }
}