/* --seal-h is the full height of seal.jpg on screen. The seal itself spans 11.5% to 37.3% of that
   height, so the frame keeps the top 48.8%: the cream left under the seal equals the cream above it,
   and the tree's margin equals the frame's margin, which puts the seal halfway between the top and the tree. */
:root { --gap: 10vh; --seal-h: 90vh; }
html, body { margin: 0; background: #f4eddb; }
.hero { display: flex; justify-content: center; overflow: hidden; }
.seal-frame { margin-top: var(--gap); height: calc(var(--seal-h) * 0.488); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 10%, #000 80%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 10%, #000 80%, transparent); mask-composite: intersect; }
.seal-frame img { height: var(--seal-h); width: auto; display: block; }
.tree { margin-top: var(--gap); display: flex; justify-content: center; }
.tree img { display: block; }
.full .tree img { width: 100%; height: 100vh; object-fit: cover; }
.framed .tree img { height: 85vh; width: auto; max-width: 88%; border-radius: 6px; }
@media (max-aspect-ratio: 10/16) {
  :root { --gap: 16vh; --seal-h: calc(80vw * 1369 / 768); }
  .seal-frame {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 10%, #000 80%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 10%, #000 80%, transparent); }
  .full .tree img { height: auto; }
  .framed .tree img { height: auto; width: 80%; max-width: none; }
}
/* A full-width moonlit lake in the spirit of the client's reference, with one card where its medallion sits. The
   front is the emblem, edge to edge; only the back, which shows a community's own photo, gets a cream frame so a
   photo in colours far from the site still reads as a card on the painting. The back's details slide down from
   behind the card and grow with the description. */
.communities { margin-top: var(--gap); }
.stage { --stage-h: 100vh; --card-w: min(280px, 62vw, 40vh); height: var(--stage-h); display: grid; place-items: center; background: rgb(70, 74, 60) url("/moonlake.jpg") center / cover no-repeat; }
.deck { position: relative; }
/* A short perspective (about 2.5 card widths) makes the near edge clearly larger mid-turn; at 1400px the card
   looked flat and the eye could read the same turn as going either way. */
.card { position: relative; z-index: 1; width: var(--card-w); aspect-ratio: 4 / 5; perspective: 600px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* The live site's nudge without its small swing past flat, which read to the client as the card opening the other
   way: a short turn toward the real turn's direction and back, repeated while the emblem shows. It moves .card, not
   .card-inner, so it never fights the turn's own transition. */
.card:not(.flipped):not(.turning) { animation: flip-hint 2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite; }
@keyframes flip-hint { 24% { transform: perspective(600px) rotateY(-28deg); } 55%, 100% { transform: none; } }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.card-face { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transition: box-shadow 0.4s ease; }
/* Open details sit right under the card, so its deep shadow would fall on their first lines. */
.card.open .card-face { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.card-face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-back { transform: rotateY(180deg); padding: 6% 6% 0; box-sizing: border-box; background: #f4eddb; display: flex; flex-direction: column; color: #2f3324; font-family: system-ui, sans-serif; text-align: center; }
.card-back > img { height: auto; flex: 1; min-height: 0; border-radius: 4px; }
/* The name takes the emblem's olive hue, a step lighter so it still reads as olive at text size. */
.card-back .name { padding: 8px 2px 6px; font-size: 15px; overflow-wrap: anywhere; color: #50572e; }
/* Ink on cream like the card's own lettering; the price sits after a hairline, as on the live button. A glass glint
   crosses it in the reading direction every few seconds while the back shows, so it reads as something to press. */
.subscribe { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; background: #2f3324; color: #f4eddb; font-size: 14px; font-weight: 600; text-decoration: none; }
.subscribe .price { padding-inline-start: 10px; border-inline-start: 1px solid rgba(244, 237, 219, 0.35); color: #e2cf9f; font-weight: 700; white-space: nowrap; }
.subscribe:hover { background: #3c412e; }
.subscribe::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(100%); background: linear-gradient(75deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%); }
.card.flipped .subscribe::after { animation: glint 3.5s ease-in-out 1.2s infinite; }
@keyframes glint { 0% { transform: translateX(100%); } 30%, 100% { transform: translateX(-100%); } }
.details-toggle { margin: 2px 0 6px; padding: 4px 2px; border: 0; background: none; color: #7a6a3f; font: inherit; font-size: 13px; cursor: pointer; }
/* A drawn chevron that dips now and then while the details are closed, to show they drop down. */
.details-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; vertical-align: middle; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform 0.3s ease; }
.details-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.card.flipped .details-toggle[aria-expanded="false"]::after { animation: drop-hint 2.4s ease-in-out 1.5s infinite; }
@keyframes drop-hint { 0%, 50%, 100% { transform: translateY(-3px) rotate(45deg); } 25% { transform: translateY(1px) rotate(45deg); } }
.card:focus-visible, .details-toggle:focus-visible, .subscribe:focus-visible { outline: 2px solid #c9a96a; outline-offset: 4px; }
.details { position: absolute; top: calc(100% - 10px); left: 5%; right: 5%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.3, 0, 0.2, 1); }
.details.open { grid-template-rows: 1fr; }
.details-body { min-height: 0; overflow: hidden; }
/* Capped to the room left under the centred card, so a long description scrolls inside the painting instead of
   hanging past its bottom edge. */
.details p { box-sizing: border-box; margin: 0; padding: 22px 16px 16px; text-align: center; max-height: calc(var(--stage-h) / 2 - var(--card-w) * 0.625 - 16px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9b88a transparent; white-space: pre-line; overflow-wrap: anywhere; font: 14px/1.7 system-ui, sans-serif; color: #2f3324; background: #f4eddb; border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
@media (max-aspect-ratio: 10/16) { .stage { --stage-h: 90vh; background-position: 80% center; } }
@media (prefers-reduced-motion: reduce) { .details, .details-toggle::after { transition: none; } .card:not(.flipped), .card.flipped .subscribe::after, .card.flipped .details-toggle[aria-expanded="false"]::after { animation: none; } }