/* The room is an easy-to-read index, not another manual. */
body { margin: 0; background: #faf7f1; color: #493f35; }
.room-hero-image { display: block; width: 100%; height: auto; }
.sappo-room { box-sizing: border-box; width: min(100%, 850px); margin: 0 auto; padding: 20px 20px 48px; }
.room-top-nav { display: flex; justify-content: flex-start; margin: 0 0 14px; }
.room-top-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #75543c; font-size: 15px; font-weight: 700; text-underline-offset: 3px; }
.room-welcome { margin: 0 0 31px; }
.room-kicker { margin: 0; color: #95623a; font-size: 13px; font-weight: 800; letter-spacing: .07em; }
.room-welcome h1 { margin: 8px 0 15px; font-size: clamp(30px, 4.5vw, 41px); line-height: 1.4; letter-spacing: .02em; color: #463b31; }
.room-title-sub { display: inline-block; color: #856e5d; font-size: clamp(15px, 2.2vw, 19px); font-weight: 600; letter-spacing: 0; }
.room-greeting { margin: 0; padding: 20px 23px; border: 1px solid #e9d9bf; border-radius: 15px; background: #fffdf9; color: #544a3f; font-size: 17px; font-weight: 500; line-height: 1.9; }
.room-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 15px; margin-bottom: 13px; }
.room-section-heading h2 { margin: 0; color: #493d33; font-size: 25px; line-height: 1.35; }
.room-articles { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.room-articles li { min-width: 0; }
.room-article-link { box-sizing: border-box; display: flex; align-items: center; gap: 18px; width: 100%; min-height: 86px; padding: 15px 19px; border: 1px solid #e8dbca; border-radius: 12px; background: #fffdf9; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(70, 52, 33, .035); transition: background-color .15s ease, border-color .15s ease; }
.room-article-link:hover { background: #fff6e9; border-color: #c8a880; }
.room-episode { flex: 0 0 auto; display: inline-block; min-width: 66px; padding: 6px 8px; border-radius: 6px; background: #f3e8d8; color: #795b3c; font-size: 13px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.room-article-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.room-article-copy strong { color: #42372e; font-size: 18px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.room-article-copy small { color: #756b61; font-size: 14px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.room-article-arrow { flex: 0 0 auto; color: #986d49; font-size: 26px; line-height: 1; }
.room-footer { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 35px; padding-top: 20px; border-top: 1px solid #e3d7c7; }
.room-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #765443; font-size: 14px; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid #86563e; outline-offset: 3px; }
@media (min-width: 768px) { .room-hero-image { height: min(345px, 40vh); object-fit: cover; object-position: 50% 38%; } }
@media (max-width: 550px) {
  .sappo-room { padding: 16px 14px 35px; }
  .room-welcome h1 { font-size: 30px; }
  .room-title-sub { display: block; margin-top: 3px; font-size: 15px; }
  .room-greeting { padding: 17px; font-size: 16px; line-height: 1.8; }
  .room-section-heading h2 { font-size: 23px; }
  .room-article-link { align-items: flex-start; gap: 11px; min-height: 87px; padding: 13px 12px; }
  .room-episode { min-width: 56px; padding: 5px 6px; font-size: 12px; margin-top: 3px; }
  .room-article-copy strong { font-size: 16px; }
  .room-article-copy small { font-size: 13px; }
  .room-article-arrow { margin-top: 11px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .room-article-link { transition: none; } }