/* Shared external stylesheet: compatible with the site's self-only CSP. */
body{background:#fcf7ee;color:#493e34}
.sappo-room{box-sizing:border-box;max-width:820px;margin:auto;padding:24px 20px 48px}
.sappo-room .growth-back,.sappo-reading .growth-back{font-size:15px;color:#6b5545;min-height:44px;margin-bottom:12px}
.room-welcome{margin:0 0 32px;padding:28px;border:1px solid #e8d6b6;border-radius:28px;background:#fff1d5;box-shadow:0 6px 0 #eee1c9}
.room-kicker{font-size:15px;font-weight:700;color:#765d42;margin:0}
.room-welcome h1{font-size:clamp(32px,7vw,46px);margin:8px 0 20px;line-height:1.4;letter-spacing:.04em}
.room-host{display:flex;align-items:center;gap:20px}
.room-mascot{width:150px;height:170px;object-fit:contain;flex-shrink:0}
.room-greeting{position:relative;flex:1;margin:0;padding:20px;background:#fffdfa;border-radius:22px;font-size:18px;line-height:1.9}
.room-greeting:before{content:"";position:absolute;left:-12px;top:40%;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:14px solid #fffdfa}
.room-greeting strong{display:block;margin-bottom:6px;color:#80503e}
.room-section h2{font-size:25px;margin:0 0 8px}
.room-section>p{font-size:16px;line-height:1.8;color:#6b6258;margin:0 0 20px}
.room-articles{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.room-card{display:block;border:1px solid #e5d8c8;border-radius:24px;background:#fffdf9;padding:26px;color:inherit;text-decoration:none;box-shadow:0 5px 0 #eee5d8}
.room-card:hover{background:#fff8e9;border-color:#b58c66}
a:focus-visible{outline:3px solid #8f3943;outline-offset:5px}
.room-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:#715e4d;font-size:14px}
.room-meta span{background:#f4e4cb;padding:5px 12px;border-radius:999px;font-weight:700}
.room-card h3{font-size:clamp(22px,5.5vw,26px);line-height:1.6;margin:16px 0 12px}
.room-card p{font-size:17px;line-height:1.9;margin:0 0 20px;color:#64574b}
.room-read{display:inline-flex;align-items:center;gap:16px;min-height:46px;padding:0 20px;border-radius:999px;background:#875640;color:#fff;font-size:17px;font-weight:700}
.room-footer{margin-top:36px;padding-top:20px;border-top:1px dashed #d4c3ae;display:flex;gap:10px 24px;flex-wrap:wrap}
.room-footer a{min-height:44px;display:inline-flex;align-items:center;color:#765443;text-underline-offset:4px;font-size:15px}
.sappo-reading{max-width:680px}.sappo-reading header{padding:8px 0 24px;border-bottom:1px solid #e5dfd8}.sappo-series{font-size:clamp(24px,5vw,30px);font-weight:800;color:#8f3943;margin:0 0 8px}.sappo-description{font-size:15px;line-height:1.8;color:#56616d;margin:0 0 28px}.sappo-reading h1{font-size:clamp(27px,6vw,38px);line-height:1.5;margin:8px 0 16px;letter-spacing:0}.sappo-episode{font-size:14px;color:#56616d}.sappo-body{padding-top:12px}.sappo-body p{font-size:18px;line-height:2;margin:26px 0;overflow-wrap:anywhere}.sappo-body strong{display:block;background:#f5eddf;border-left:4px solid #b38135;padding:20px;border-radius:0 12px 12px 0}.sappo-reading footer{margin-top:38px;padding-top:24px;border-top:1px solid #e5dfd8;display:flex;flex-wrap:wrap;gap:20px}.sappo-reading footer a{font-weight:700}a:focus-visible{outline:3px solid #8f3943;outline-offset:5px}

.sappo-reading{color:#493e34}
.sappo-reading article{padding:28px;background:#fffdf9;border:1px solid #e5d8c8;border-radius:24px}
.sappo-reading .sappo-series{color:#80503e}
.sappo-reading footer a{min-height:44px;display:inline-flex;align-items:center;color:#765443}
@media(max-width:480px){.sappo-room{padding:16px 16px 40px}.room-welcome{padding:22px 18px}.room-host{gap:10px;align-items:flex-end}.room-mascot{width:88px;height:132px}.room-greeting{padding:14px;font-size:16px;line-height:1.85}.room-greeting:before{top:55%}.room-card{padding:22px 20px}.sappo-reading article{padding:22px 18px}.sappo-reading h1{font-size:27px}.sappo-body p{font-size:18px;line-height:1.95}}

/* Show the complete room illustration at every screen width. */
.room-welcome--illustrated{padding:0;overflow:hidden}
.room-welcome--illustrated .room-kicker{padding:24px 24px 0}
.room-welcome--illustrated h1{margin:6px 24px 18px}
.room-hero-image{display:block;width:100%;height:auto}
.room-welcome--illustrated .room-host{padding:20px 24px 24px}
.room-welcome--illustrated .room-greeting:before{left:32px;top:-12px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:0;border-bottom:14px solid #fffdfa}
@media(max-width:480px){.room-welcome--illustrated{padding:0}.room-welcome--illustrated .room-kicker{padding:20px 18px 0}.room-welcome--illustrated h1{margin:6px 18px 16px}.room-welcome--illustrated .room-host{padding:18px}.room-welcome--illustrated .room-greeting{font-size:16px}}


/* Article -> detailed manual: a deliberate third level after the story. */
.sappo-reading .sappo-deeper { margin-top: 32px; padding: 22px; border-radius: 14px; border: 1px solid #eadbc7; background: #faf2e5; }
.sappo-reading .sappo-deeper p { margin: 0 0 12px; color: #635347; font-size: 15px; line-height: 1.7; }
.sappo-reading .sappo-deeper a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border-radius: 9px; background: #82543b; color: #fff; text-decoration: none; font-size: 15px; font-weight: 800; }
.sappo-reading .sappo-deeper a:hover { background: #6c422d; }
@media (max-width: 480px) { .sappo-reading .sappo-deeper { padding: 16px; } .sappo-reading .sappo-deeper a { width: 100%; box-sizing: border-box; } }


/* Sappo story 6: screenshots lead, copy stays short. */
.sappo-reading.sappo-six { max-width: 980px; }
.sappo-six header { padding-bottom: 12px; }
.sappo-six .sappo-episode { margin-top: 12px; }
.sappo-six h1 { margin-bottom: 8px; }
.sappo-six .sappo-six-intro p { margin: 17px 0 16px; font-size: 18px; line-height: 1.9; }
.sappo-six .sappo-six-intro strong {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: #674632; font-size: inherit;
}
.sappo-six-gallery { display: grid; gap: 22px; margin: 20px 0 22px; }
.sappo-six-shot { min-width: 0; margin: 0; padding: 0; }
.sappo-six-shot img {
  display: block; width: 100%; height: auto; object-fit: contain;
  border: 1px solid #e5dfd6; border-radius: 12px; background: #f8f8f7;
}
.sappo-six-shot figcaption {
  margin: 7px 0 0; padding-left: 2px; color: #77695e;
  font-size: 14px; line-height: 1.65; font-weight: 650;
}
.sappo-six-shot-3 { width: min(100%, 430px); justify-self: center; }
.sappo-six-note { margin: 12px 0 0; }
.sappo-six-note p { margin: 10px 0; font-size: 16px; line-height: 1.85; }
.sappo-six-note b { font-weight: 800; }
.sappo-six .sappo-deeper { margin-top: 24px; }
@media (max-width: 600px) {
  .sappo-reading.sappo-six article { padding: 20px 14px; }
  .sappo-six .sappo-six-intro p { font-size: 16px; }
  .sappo-six-gallery { gap: 17px; margin: 17px 0; }
  .sappo-six-shot figcaption { font-size: 12px; }
  .sappo-six-note p { font-size: 15px; }
  .sappo-six-shot-3 { width: min(100%, 350px); }
}