/* v1.5.0 | Background and editorial paper frame only.
   Desktop: original, fictional washi/harbor artwork outside Cocoon's 1-column #main.
   All selectors require plugin body classes; no edits to posts or theme files. */
body.ryoma-site-design.ryoma-side-backdrop {
  background-color: #e9e2d5;
}
@media (min-width: 1180px) {
  body.ryoma-site-design.ryoma-side-backdrop {
    background-image:
      linear-gradient(90deg, rgba(247,243,233,.18) 0%,rgba(247,243,233,.07) 22%,rgba(247,243,233,.24) 50%,rgba(247,243,233,.07) 78%,rgba(247,243,233,.18) 100%),
      url("bakumatsu-side-washi.webp");
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
  }
}
/* Visual frame applies to front, archives, posts and pages alike. */
@media (min-width: 768px) {
  body.ryoma-site-design.ryoma-side-backdrop #main.main {
    border-left: 1px solid rgba(155,122,69,.62) !important;
    border-right: 1px solid rgba(155,122,69,.62) !important;
    background-color: #f8f5ed;
    box-shadow:
      0 0 0 4px rgba(248,244,234,.36),
      -9px 0 27px rgba(41,49,46,.08),
      9px 0 27px rgba(41,49,46,.08),
      0 15px 42px rgba(39,42,37,.08) !important;
  }
  body.ryoma-site-design.ryoma-side-backdrop #content-in.content-in {
    max-width: 1210px !important;
  }
}
/* Tablet has less room for scenic margins: leave an unobtrusive washi color. */
@media (min-width: 768px) and (max-width: 1179px) {
  body.ryoma-site-design.ryoma-side-backdrop {
    background-image: none !important;
    background-color: #ede7dc !important;
  }
  body.ryoma-site-design.ryoma-side-backdrop #main.main {
    box-shadow: 0 0 0 1px rgba(167,141,96,.20), 0 9px 20px rgba(40,42,38,.06) !important;
  }
}
/* Mobile: NO wallpaper, no heavy side-shadow; preserve readable 1-column. */
@media (max-width: 767px) {
  body.ryoma-site-design.ryoma-side-backdrop {
    background: #f5f1e9 !important;
  }
  body.ryoma-site-design.ryoma-side-backdrop #main.main {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-color: #f8f5ed;
  }
  body.ryoma-site-design.ryoma-side-backdrop #content-in.content-in {
    max-width: 100% !important;
    overflow-x: clip;
  }
}
@media print {
  body.ryoma-site-design.ryoma-side-backdrop { background: #fff !important; }
  body.ryoma-site-design.ryoma-side-backdrop #main.main {
    border-left: 0 !important;border-right: 0 !important;box-shadow: none !important;
  }
}