/* Raster paintings and tactile paper; presentation only, shared by all Stories sources. */
body.painted-site:not(.sea-app-mode) {
  background: #f3ead8 url('/assets/papyrus-creased-v1.png') repeat 0 0 / 850px auto;
}
body.painted-site .stay-main {
  background: url('/assets/stay-oak-garden-v1.png') center / cover no-repeat;
}
body.painted-site .account-login-main {
  background: url('/assets/account-journal-v1.png') center top / 100% auto no-repeat;
}
body.painted-site:not(.sea-app-mode) .sea-heading {
  min-height: 270px;
  align-items: flex-end;
  padding: 28px;
  background: linear-gradient(90deg, #102b35bc, #102b3500 65%), url('/assets/sea-sailing-v1.png') center / cover;
}
body.painted-site:not(.sea-app-mode) .sea-heading-meta {
  padding: 12px;
  border-radius: 12px;
  background: #102b35e8;
}
/* Light page surround; instrument panels and maps keep their original dark UI. */
body.painted-site:not(.sea-app-mode) .sea-tabs button { color: #24484b; }
body.painted-site:not(.sea-app-mode) .sea-tabs button.active { color: #fff8e9; }
body.painted-site .admin-overview > .admin-section-head,
body.painted-site .accounts-heading {
  padding: 28px;
  min-height: 190px;
  background: linear-gradient(90deg, #fff9edf5, #fff9ed40), url('/assets/account-journal-v1.png') center / cover;
}

/* A fixed grid, not a collage: rotation never changes ordering or hides a card. */
.painted-site .stories-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 44px 36px;
  padding: 40px 32px;
  border: 8px solid #ae7747;
  border-radius: 8px;
  background: #bf905e url('/assets/stories-cork-v1.png') repeat 0 0 / 530px auto;
  box-shadow: inset 0 2px 12px #573b2b50, 0 12px 30px #493b2224;
}
.painted-site .stories-grid .story-card {
  --postcard-angle: -1deg;
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: visible;
  border: 10px solid #fffaf0;
  border-bottom-width: 16px;
  border-radius: 2px;
  background: #fffaf0;
  box-shadow: 2px 7px 13px #44301e55;
  transform: rotate(var(--postcard-angle));
  transform-origin: center;
}
.painted-site .stories-grid .story-card:nth-child(4n + 2) { --postcard-angle: 1.1deg; }
.painted-site .stories-grid .story-card:nth-child(4n + 3) { --postcard-angle: -.6deg; }
.painted-site .stories-grid .story-card:nth-child(4n) { --postcard-angle: .7deg; }
.painted-site .stories-grid .story-card::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -15px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 1px solid #813b28;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7b59a, #bb593a 48%, #873d2c);
  box-shadow: 2px 4px 3px #422f2b65;
  pointer-events: none;
}
.painted-site .stories-grid .story-image { border: 0; border-radius: 0; }
.painted-site .stories-grid .story-body { padding: 18px 10px 6px; gap: 12px; overflow-wrap: anywhere; }
.painted-site .stories-grid .story-body h2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.4;
  font-size: 25px;
}
.painted-site .stories-grid .story-meta { flex-wrap: wrap; gap: 5px 12px; }
.painted-site .stories-grid .story-link { color: #185d63; }
.painted-site .stories-grid a:focus-visible { outline: 3px solid #185d63; outline-offset: 4px; }
.painted-site .stories-grid .stories-empty {
  grid-column: 1 / -1;
  background: #fffaf0;
  border: 0;
  box-shadow: 2px 7px 13px #44301e35;
}
@media (max-width: 1050px) {
  .painted-site .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .painted-site .stories-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 30px 20px; border-width: 5px; }
  .painted-site .stories-grid .story-card { transform: rotate(calc(var(--postcard-angle) * .6)); }
  .painted-site .stories-grid .story-body { padding: 15px 5px 5px; }
  body.painted-site .account-login-main { background-size: auto 360px; background-position: 65% top; }
  body.painted-site .stay-main { background-position: 60% center; }
  body.painted-site:not(.sea-app-mode) .sea-heading { min-height: 300px; padding: 20px; align-items: stretch; }
  body.painted-site:not(.sea-app-mode) .sea-heading-meta { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .painted-site .stories-grid .story-image img { transition: none; }
}