:root {
  --paper: #e8e0d2;
  --ink: #1c2a22;
  --muted: #5c6b62;
  --accent: #2f5d45;
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { margin: 0; }
body.site-view {
  margin: 0;
  background: #1e3d34;
  color: var(--ink);
  min-height: 100%;
}
.site-root a { color: inherit; }

.site-root { min-height: 100vh; }
.site-empty { padding: 2rem; color: #f4efe6; }

.sheet {
  position: relative;
  min-height: 100vh;
  height: auto;
  background: var(--sheet-bg, #f4efe6);
  overflow: visible;
  color: var(--sheet-ink, #1c2a22);
}
.sheet-stage {
  position: relative;
  width: 100%;
  height: 1200px;
  z-index: 1;
}
.site-ad-footer {
  position: relative;
  z-index: 2;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--sheet-header-bg, #1e3d34) 92%, #000);
  color: var(--sheet-header-ink, #f4efe6);
}
.site-ad-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* "Made with Standwell Web" (CHANGELOG section 44): quiet, small, readable, in the template's colors. */
.site-credit {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.9rem 1rem 1.1rem;
  text-align: center;
  font: 400 0.75rem/1.4 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  background: var(--sheet-bg, #f4efe6);
  color: color-mix(in srgb, var(--sheet-ink, #1c2a22) 72%, var(--sheet-bg, #f4efe6));
}
.site-credit a {
  display: inline-block;
  min-height: 24px;
  padding: 0.2rem 0.45rem;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.site-credit a:hover,
.site-credit a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.site-credit a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.sheet-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sheet-bg-photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: var(--sheet-header-bg, #1e3d34);
  color: var(--sheet-header-ink, #f4efe6);
  border-bottom: 1px solid color-mix(in srgb, var(--sheet-header-bg, #1e3d34) 70%, #000);
  font-family: var(--header-font, inherit);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-nav a {
  text-decoration: none;
  color: var(--sheet-header-ink, #f4efe6);
  opacity: 0.7;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  flex: 1 0 auto;
  min-width: min(100%, max-content);
  max-width: 100%;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.site-nav a:hover { opacity: 1; }
.site-nav a.on {
  opacity: 1;
  background: var(--header-active-bg, var(--sheet-header-ink, #f4efe6));
  color: var(--header-active-ink, var(--sheet-header-bg, #1e3d34));
}
.site-nav.is-selected {
  outline: 2px solid var(--sheet-accent, #2f5d45);
  outline-offset: -2px;
}

.site-watermark {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.site-watermark span {
  transform: rotate(-22deg);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 42, 34, 0.14);
  white-space: nowrap;
}

.page-card {
  position: absolute;
  background-color: transparent;
  background-image: none;
  color: var(--card-ink, var(--sheet-ink, #1c2a22));
  font-family: var(--card-font, inherit);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 42, 34, calc(0.14 * var(--card-fill, 1)));
  overflow: hidden;
  --card-fill: 1;
  --card-photo-op: 1;
  --card-text: 1;
  --card-text-scale: 1;
  --card-align: left;
  --card-ink: var(--sheet-ink, #1c2a22);
  --card-tilt: 0deg;
  transform: rotate(var(--card-tilt, 0deg));
  transform-origin: center center;
}
.page-card.is-tilted {
  box-shadow: 0 12px 28px rgba(28, 42, 34, 0.22);
}
.page-card.is-unused .unused-mark {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  pointer-events: none;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #1f2937;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.55) 0 7px,
    rgba(17, 17, 17, 0.08) 7px 14px
  );
}
.page-card.is-polaroid {
  overflow: visible;
  background: transparent;
  background-image: none;
  box-shadow: none;
  border-radius: 0;
  clip-path: none;
  filter: none;
}
.page-card.is-polaroid::after {
  display: none;
}
.page-card.is-polaroid.corner-rounded,
.page-card.is-polaroid.corner-square,
.page-card.is-polaroid.corner-cut,
.page-card.is-polaroid.corner-banner {
  border-radius: 0;
  clip-path: none;
  filter: none;
}
/* The Polaroid fills its card's box (CHANGELOG 75). The frame picture (832 x 1010, borders
   62 left, 58 right, 66 top, 213 bottom) is drawn as a 9-slice border, so the borders keep their
   proportions and only the middle stretches: a wide box gets a wide Polaroid with the same thin
   sides and thick chin, not a squashed picture. --pu is one frame pixel: the smaller of
   width/832 and height/1010 of the shell (container units resolve where they are used, inside
   the shell). */
.polaroid-shell {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  border-radius: 0;
  box-shadow: 0 12px 24px rgba(20, 20, 18, 0.28);
  container-type: size;
  --pu: min(calc(100cqw / 832), calc(100cqh / 1010));
}
.polaroid-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border-style: solid;
  border-width: calc(66 * var(--pu)) calc(58 * var(--pu)) calc(213 * var(--pu)) calc(62 * var(--pu));
  border-image: url("/assets/samples/Photo_Frame/layer-polaroid-style-photo-frame.png") 66 58 213 62 / calc(66 * var(--pu)) calc(58 * var(--pu)) calc(213 * var(--pu)) calc(62 * var(--pu)) stretch;
  z-index: 2;
}
.polaroid-window {
  position: absolute;
  left: calc(60 * var(--pu));
  top: calc(66 * var(--pu));
  right: calc(58 * var(--pu));
  bottom: calc(213 * var(--pu));
  overflow: hidden;
  background: transparent;
  z-index: 1;
}
.polaroid-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  transform: scale(var(--card-photo-zoom, 1));
  transform-origin: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  opacity: var(--card-photo-op, 1);
}
.polaroid-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--card-paper, var(--sheet-surface, #fffdf8)) calc(var(--card-fill, 1) * 100%), transparent);
}
.polaroid-chin {
  position: absolute;
  left: calc(75 * var(--pu));
  right: calc(75 * var(--pu));
  bottom: calc(45 * var(--pu));
  height: calc(157 * var(--pu));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: var(--chin-pack, center);
  text-align: var(--card-align, center);
  font-family: var(--chin-font, inherit);
  opacity: var(--card-text, 1);
  font-size: calc(51.6 * var(--pu) * var(--card-text-scale, 1));
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--chin-ink, #2c2a27);
  overflow: hidden;
  pointer-events: none;
  padding: 0 0.15em;
}
.polaroid-chin:empty {
  display: none;
}
.page-card.text-bold .polaroid-chin { font-weight: 800; }
.page-card.text-italic .polaroid-chin { font-style: italic; }
.page-card.text-underline .polaroid-chin {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.page-card.ink-light .card-body {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.page-card.is-tunable { cursor: pointer; }
.page-card.selected {
  outline: 2px solid var(--sheet-accent, #2f5d45);
  outline-offset: 2px;
}
.page-card.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--card-photo, none);
  background-size: cover;
  background-position: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  background-repeat: no-repeat;
  transform: scale(var(--card-photo-zoom, 1));
  transform-origin: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  opacity: var(--card-photo-op, 1);
}
.page-card > .card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  transform: scale(var(--card-photo-zoom, 1));
  transform-origin: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  opacity: var(--card-photo-op, 1);
  pointer-events: none;
  border-radius: inherit;
}
.page-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--card-paper, var(--sheet-surface, #fffdf8)) calc(var(--card-fill, 1) * 100%), transparent);
}
.page-card.corner-square { border-radius: 0; }
.page-card.corner-rounded { border-radius: 10px; }
.page-card.corner-cut {
  border-radius: 0;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(28, 42, 34, calc(0.16 * var(--card-fill, 1))));
}
.page-card.corner-banner {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  box-shadow: none;
  filter: drop-shadow(0 8px 14px rgba(28, 42, 34, calc(0.16 * var(--card-fill, 1))));
}
.page-card .card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 1.1rem 0.85rem 0.7rem;
  overflow: hidden;
  opacity: var(--card-text);
  text-align: var(--card-align);
  font-size: calc(0.92rem * var(--card-text-scale));
}
.page-card .card-body h1 {
  font-size: 1.35em;
  margin: 0;
}
.page-card .card-body a { text-decoration: underline; }

.pv-muted { color: var(--sheet-muted, #5c6b62); font-size: 0.82rem; }
.page-card[data-id="logo"] .card-body,
.page-card[data-id="logo_page_two"] .card-body {
  padding: 0.35rem;
}
.pv-logo {
  width: 100%;
  height: 100%;
  min-height: 2.5rem;
}
.pv-logo,
.pv-photo { overflow: hidden; }
.pv-logo img,
.pv-photo img {
  opacity: var(--card-photo-op, 1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  transform: scale(var(--card-photo-zoom, 1));
  transform-origin: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
}
.pv-photo { height: 100%; }
.pv-delivery { display: grid; gap: 0.35rem; font-weight: 650; }

.listings-area {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.listings-area-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 1.2rem 0.5rem 0.5rem;
  overflow: visible;
}
.listings-flow { display: grid; gap: 0.85rem; }
.section-block { display: grid; gap: 0.45rem; }
.stamp {
  background: color-mix(in srgb, var(--card-paper, var(--sheet-surface, #fffdf8)) calc(var(--card-fill, 1) * 100%), transparent);
  color: var(--card-ink, var(--sheet-ink, #1c2a22));
  font-family: var(--card-font, inherit);
  --card-fill: 1;
  --card-text: 1;
  --card-text-scale: 1;
  --card-align: left;
}
.stamp.corner-square { border-radius: 0; }
.stamp.corner-rounded { border-radius: 10px; }
.stamp.corner-cut {
  border-radius: 0;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.stamp.corner-banner {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.stamp .card-body {
  opacity: var(--card-text);
  text-align: var(--card-align);
  font-size: calc(0.86rem * var(--card-text-scale));
  padding: 0.45rem 0.55rem;
}
.stamp.is-tunable { cursor: pointer; }
.stamp.selected {
  outline: 2px solid var(--sheet-accent, #2f5d45);
  outline-offset: 2px;
}
.stamp-section { width: 100%; }
.stamp-section h2 {
  margin: 0;
  font-size: 1.15em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listings-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
.listings-flow[data-mode="list"] .stamp-listing {
  flex: 1 1 100%;
  max-width: 100%;
}
.listings-flow[data-mode="grid"] .stamp-listing {
  flex: 0 1 calc((100% - (var(--cols) - 1) * 8px) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * 8px) / var(--cols));
}
.listing-wrap { display: flex; gap: 0.55rem; align-items: flex-start; }
.listing-photo { flex: 0 0 3.4rem; }
.listing-photo img {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: 4px;
}
.listing-copy { flex: 1; min-width: 0; }
.listing-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.listing-head strong { font-weight: 650; }
.listing-price { font-weight: 700; white-space: nowrap; margin-left: auto; }
.sold-mark {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b2e2e;
}
.stamp.is-sold { opacity: 0.78; }

.arched {
  width: 100%;
  height: calc(2.6rem * var(--card-text-scale, 1));
  overflow: visible;
}
.page-card.autofit svg.arched {
  width: 100%;
  height: 100%;
}
.arched text { fill: currentColor; font-size: calc(18px * var(--card-text-scale, 1)); font-weight: 700; }
.polaroid-chin .arched {
  width: 100%;
  height: 100%;
}
.page-card.autofit .card-body,
.page-card.autofit .card-body h1,
.page-card.autofit .card-body p {
  font-size: inherit;
  margin: 0;
  line-height: 1.05;
}
.page-card.text-bold .card-body,
.stamp.text-bold .card-body { font-weight: 800; }
.page-card.text-italic .card-body,
.stamp.text-italic .card-body { font-style: italic; }
.page-card.text-underline .card-body,
.stamp.text-underline .card-body { text-decoration: underline; }
.page-card.text-bold .arched text { font-weight: 800; }
.page-card.text-italic .arched text { font-style: italic; }
.page-card.text-underline .arched text { text-decoration: underline; }

@media (max-width: 720px) {
  .page-card .card-body { padding: 0.85rem 0.6rem 0.5rem; }
  .site-nav { font-size: 0.78rem; }
}

/* ---------- Short videos on photo cards 1 and 2 (CHANGELOG section 33) ---------- */
.page-card > video.card-video { display: block; background: transparent; }
.polaroid-window > video.polaroid-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
  transform: scale(var(--card-photo-zoom, 1));
  transform-origin: var(--card-photo-x, 50%) var(--card-photo-y, 50%);
}
.page-card.has-video, .polaroid-window.has-video { cursor: pointer; }
.card-video-sound,
.card-video-play {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  color: #fff;
  background: rgba(20, 24, 28, 0.62);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card-video-sound {
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.card-video-sound svg { width: 20px; height: 20px; fill: currentColor; }
.card-video-sound.is-on { background: rgba(20, 24, 28, 0.82); }
.card-video-play {
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
}
.card-video-play[hidden] { display: none; }
.card-video-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.card-video-sound:focus-visible,
.card-video-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }