/* The McKinley Coming Soon sign. The rule (JJ, 2026-09-24): a home or lot with no photos
   shows this sign, never a blank box. Link this file and paste the markup below into the
   empty photo spot. scripts/check_soon_sign.py fails any photo box left empty.

   <div class="soon-tile">
     <div class="soon-sign" role="img" aria-label="Coming soon, The McKinley Group">
       <span class="soon-sign__arm"></span>
       <div class="soon-sign__chains"><i></i><i></i></div>
       <div class="soon-sign__panel">
         <img src="/assets/logos/mckinley-logo-dark.png" alt="" width="84" height="27" />
         <strong>Coming Soon</strong>
         <span class="soon-sign__sub">Lot 22 renderings</span>
       </div>
     </div>
   </div>

   The coming-soon pages' full-size sign, with its post and rider, is built by
   scripts/coming_soon.py from the same design. */

.soon-tile { background: var(--ink); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.soon-sign { width: min(68%, 330px); }
.soon-sign__arm { display: block; height: 6px; background: linear-gradient(180deg, #f4f1ea, #cfc8bc); border-radius: 2px; }
.soon-sign__chains { display: flex; justify-content: space-between; padding: 0 16%; height: 14px; }
.soon-sign__chains i { width: 2px; background: rgba(228,223,216,0.75); }
.soon-sign__panel { background: var(--white); color: var(--ink); text-align: center; padding: clamp(0.9rem, 2.4vw, 1.4rem) 0.8rem; box-shadow: inset 0 0 0 7px var(--white), inset 0 0 0 8px var(--ink), 0 18px 40px rgba(0,0,0,0.5); }
/* Specific on purpose: a card's own "img { width:100%; height:100% }" rule must never stretch the logo. */
.soon-tile .soon-sign .soon-sign__panel img { display: block; margin: 0 auto 0.6rem; width: clamp(60px, 9vw, 84px); height: auto; object-fit: contain; }
.soon-sign__panel strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; color: var(--ink); }
.soon-sign__sub { display: block; margin-top: 0.6rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--grey); white-space: nowrap; }