/* SeaSpiritFamily travel journal. Raster paintings + quiet, accessible controls.
   Scoped to browser pages: no map/filter changes and no native alarm UI changes. */
.painted-site {
  --cream: #f4ecdd;
  --paper: #fff9ee;
  --white: #fffdf7;
  --coral: #b44d30;
  --sun: #efb45d;
  --ocean: #185d63;
  --soft-line: #c6b89c;
  --shadow: 0 8px 24px #493b2210;
  background: linear-gradient(#f4ecddf5, #f4ecddf5), url('/assets/land-painted-coast.png') center top / 1800px auto repeat-y;
}
.painted-site .topbar, .painted-site .admin-topbar {
  border-bottom: 3px solid #c78b52;
  background: linear-gradient(90deg, #102b35f7, #102b35dc), url('/assets/social-boho-twilight.png') center / cover;
  box-shadow: 0 5px 20px #10262d20;
}
.painted-site .brand-compass { box-shadow: 0 0 0 3px #efb45d40; }
.painted-site .brand-lockup strong b { color: #f39d6e; }
.painted-site .topbar nav .active { border-radius: 0 0 40% 20%; }
.painted-site .account-link, .painted-site .secondary-button {
  border-width: 1px;
  border-radius: 13px 5px 14px 6px;
}
.painted-site h1 { line-height: 1.2; padding-block: .08em; }
.painted-site h2, .painted-site h3 { line-height: 1.3; }
.painted-site .eyebrow, .painted-site .step-label { color: #955032; }
.painted-site :is(.summary, .sea-heading, .stories-source-intro, .account-intro) .eyebrow { color: #f2c58a; }
.painted-site footer {
  border-top: 3px solid #c78b52;
  background: linear-gradient(#102b35ec, #102b35ec), url('/assets/social-boho-twilight.png') center 60% / cover;
}

/* LAND: a painted landscape behind a separate, truthful product photograph. */
.painted-site .intro {
  min-height: 490px;
  margin: 28px auto 0;
  max-width: 1340px;
  padding: 54px clamp(24px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 60px);
  border: 1px solid #d3bd96;
  border-radius: 30px 12px 34px 10px;
  color: #163b40;
  background: #f1e2c8 url('/assets/land-painted-coast.png') center / cover no-repeat;
  box-shadow: 0 16px 48px #58442815;
}
.painted-site .intro::before { display: none; }
.painted-site .intro h1 { font-size: clamp(40px, 4.8vw, 66px); }
.painted-site .intro h1 span { color: #a5492f; }
.painted-site .intro-copy > p:not(.eyebrow) { color: #29494b; font-weight: 600; }
.painted-site .intro-facts { color: #29494b; gap: 9px; }
.painted-site .intro-facts span {
  border: 1px solid #c9ae7f;
  border-radius: 10px 4px 12px 5px;
  background: #fff8e9ec;
  box-shadow: 0 3px 7px #72532c0b;
}
.painted-site .intro-facts strong { color: #8e432c; }
.painted-site .camper-photo {
  align-self: center;
  border: 9px solid #fff9ed;
  border-bottom-width: 36px;
  border-radius: 5px 12px 5px 9px;
  box-shadow: 0 12px 28px #10262d38;
  transform: rotate(-1deg);
}
.painted-site .camper-photo::after { display: none; }
.painted-site .camper-photo img { min-height: 0; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.painted-site .camper-photo figcaption {
  left: 8px; right: 8px; bottom: -27px;
  color: #425550; font-size: 10px; text-align: center; letter-spacing: .06em;
}
.painted-site .photo-stamp {
  color: #fff7e6; background: #a94b30; border: 2px solid #fff7e6;
  border-radius: 43% 57% 47% 53%; box-shadow: 2px 4px 0 #c9985b55;
}
.painted-site .booking-shell { max-width: 1380px; }
.painted-site .booking-head { border-bottom: 2px solid #b99765; }
.painted-site fieldset {
  border: 1px solid #c8b598;
  border-radius: 18px 7px 19px 8px;
  background: #fffaf2;
}
.painted-site legend span {
  border: 0; border-radius: 45% 55% 42% 58%; background: #235d61;
  box-shadow: 2px 3px 0 #dfb47855;
}
.painted-site :is(.choice-card, .extra-card) { border-width: 1px; border-color: #bdad94; border-radius: 10px 4px 12px 5px; background: #fffdf8; }
.painted-site :is(.choice-card, .extra-card):has(input:checked) { background: #e4f0e6; border: 2px solid #23676b; box-shadow: 0 3px 8px #23676b15; }
.painted-site .choice-card:has(input:focus-visible) { outline: 3px solid #185d63; outline-offset: 3px; }
.painted-site .summary {
  border: 1px solid #456965; border-radius: 19px 7px 22px 8px;
  background: linear-gradient(#102b35f2, #102b35f7), url('/assets/social-boho-twilight.png') center / cover;
  box-shadow: 0 12px 25px #10262d26;
}
.painted-site .summary::before { width: 100%; height: 6px; background: #d2a267; border-radius: 50%; }
.painted-site :is(.primary-button, .hold-button) {
  border: 1px solid #fff8e5; border-radius: 12px 5px 14px 6px;
  box-shadow: 0 4px 0 #10262d26;
  background-image: linear-gradient(105deg, #ffffff0d, transparent 60%, #00000008);
}
.painted-site .primary-button { background-color: #a7482c; }
.painted-site :is(.primary-button, .hold-button):hover { box-shadow: 0 2px 0 #10262d26; }
.painted-site :is(input:not([type='checkbox']):not([type='radio']), select) { border-radius: 7px 3px 8px 4px; }

/* Account and administration retain dense, crisp data/form surfaces. */
.painted-site .account-login-main {
  max-width: none; min-height: calc(100vh - 155px); padding-bottom: 70px;
  background: linear-gradient(90deg, #f4ecddc9, #f4ecdd3d), url('/assets/land-painted-coast.png') center / cover;
}
.painted-site :is(.account-card, .signed-in-panel, .admin-login) {
  border: 1px solid #baa37f; border-radius: 23px 8px 25px 9px;
  background: #fffaf3f7; box-shadow: 0 18px 45px #30271822;
}
.painted-site :is(.admin-stat-grid article, .admin-site-links a) { border-width: 1px; border-radius: 14px 5px 15px 6px; box-shadow: 0 5px 14px #57412412; }
.painted-site .admin-heading { border-bottom: 2px solid #b99765; }
.painted-site .admin-subsection { border-top: 2px solid #b99765; }

/* SEA: paintings belong around instruments, never over maps or alerts. */
.painted-site.sea-body { --coral: #f04c24; --sun: #ffbd59; background: #091e26; }
.painted-site .sea-heading {
  padding: 22px 26px;
  border: 1px solid #456863; border-radius: 20px 6px 22px 7px;
  background: linear-gradient(90deg, #102b35f5, #102b35ae), url('/assets/social-boho-twilight.png') center / cover;
}
.painted-site .sea-heading h1 { font-size: clamp(38px, 4vw, 58px); }
.painted-site :is(.instrument-card, .photo-control-card, .timeline-panel, .polar-copy) { border-radius: 13px 5px 15px 6px; }
.painted-site .sea-tabs button { border-radius: 12px 4px 0 0; }
.painted-site .sea-tabs button.active { background: #173c42; }
.painted-site .stories-heading, .painted-site .stories-source-intro { box-shadow: 0 9px 25px #493b2215; }
.painted-site .story-card { border-color: #c5ae88; background: #fffaf1; }
.painted-site .content-toolbar .filter-button { border-radius: 38% 42% 35% 44%; box-shadow: 0 3px 9px #59452712; }
.painted-site .content-toolbar .filter-button.active { background: #235d61; box-shadow: 0 4px 0 #bc7957; }

/* Existing semantic icons, with translucent pigment washes and ink outlines.
   Platform logos stay original. Functional geometry stays sharp at 24 px. */
.ssf-icon-wash { display: none; }
.painted-site .ssf-icon-wash { display: inline; fill: var(--ssf-icon-accent, currentColor); stroke: none; opacity: .18; }
.painted-site .ssf-icon-ink { stroke-width: 1.9; }
.painted-site .ssf-icon-accent { stroke-width: 2.4; }
.painted-site :is(.topbar, .admin-topbar) .ssf-icon-wash { opacity: .23; }
.painted-site .ssf-icon { width: 28px; height: 28px; flex-basis: 28px; }

@media (max-width: 1100px) {
  .painted-site .intro { margin: 20px 18px 0; gap: 26px; }
  .painted-site .intro h1 { font-size: clamp(40px, 5vw, 58px); }
}
@media (max-width: 760px) {
  .painted-site .intro { grid-template-columns: 1fr; padding: 30px 24px; background-position: 38% center; background-image: linear-gradient(#fff2decb, #fff2de40), url('/assets/land-painted-coast.png'); }
  .painted-site .intro-copy { max-width: 560px; }
  .painted-site .camper-photo { width: 100%; max-width: 570px; margin: 5px auto 0; }
  .painted-site .sea-heading { padding: 18px; }
  .painted-site .account-login-main { background-position: 58% center; }
}
@media (prefers-reduced-motion: reduce) {
  .painted-site .primary-button { transition: none; }
}