/* ============================================================================
   NEST — postcard.css · the sample neighbor card on selling.html (2026-11-06)
   The card on the desk opens the peek: a dialog where the real card (two
   rasterized faces of the office print file) flips on click. Click the grey
   outside, the X, or Esc to close. Under reduced motion the faces crossfade.
   Depends on nest.css for the brand variables.
   ========================================================================= */
.neighbors{display:grid;gap:2rem 3.5rem;align-items:center}
@media (min-width:62rem){.neighbors{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.neighbors__head p{margin:0 0 1rem;color:rgba(247,245,238,.88);max-width:28rem}
.neighbors__head .kicker{color:var(--manchester);margin:0 0 1rem}
.neighbors__acts{display:flex;gap:.75rem 1rem;flex-wrap:wrap;align-items:center;margin-top:1.25rem}
.neighbors__which{font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--manchester)}
.flipbtn{font:inherit;font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--manchester);background:none;color:var(--simply);padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background .25s var(--ease),color .25s var(--ease)}
.flipbtn:hover,.flipbtn:focus-visible{background:var(--manchester);color:var(--hunter)}
.flipbtn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the card on the desk */
.deck{perspective:1400px;padding:clamp(.5rem,2vw,1.25rem) 0}
.desk{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:4px;
  transform:rotateY(-7deg) rotateX(4deg);transition:transform .6s var(--ease);box-shadow:0 22px 34px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3)}
.desk img{display:block;width:100%;height:auto;border-radius:4px}
.desk:hover,.desk:focus-visible{transform:rotateY(0) rotateX(0) translateY(-4px)}
.desk:focus-visible{outline:2px solid var(--manchester);outline-offset:6px}
.desk__hint{position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);background:var(--manchester);color:var(--hunter);font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .9rem;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.3);white-space:nowrap;transition:transform .3s var(--ease)}
.desk:hover .desk__hint{transform:translateX(-50%) translateY(-3px)}
@media (prefers-reduced-motion:reduce){.desk{transform:none}.desk:hover{transform:none}}

/* ---------- the peek ---------- */
.peek{position:fixed;inset:0;z-index:60;display:grid;place-items:start center;overflow-y:auto;padding:clamp(1rem,4vh,3rem) 1rem;-webkit-overflow-scrolling:touch}
.peek[hidden]{display:none}
.peek__scrim{position:fixed;inset:0;background:rgba(38,42,38,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:peek-in .3s var(--ease) both}
.peek__panel{position:relative;width:min(100%,64rem);animation:peek-up .45s var(--ease) both}
@keyframes peek-in{from{opacity:0}to{opacity:1}}
@keyframes peek-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.peek__close{position:absolute;top:-.25rem;right:0;z-index:2;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid rgba(247,245,238,.5);background:rgba(47,74,47,.7);color:var(--simply);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.peek__close:hover,.peek__close:focus-visible{background:var(--manchester);color:var(--hunter);border-color:var(--manchester)}
.peek__stage{position:relative;perspective:1800px;padding:3.2rem 0 .5rem}
.peek__hint{position:absolute;top:.2rem;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;animation:hint-float 2.2s ease-in-out infinite;transition:opacity .4s}
.peek__hint span{display:inline-flex;align-items:center;gap:.5rem;background:var(--manchester);color:var(--hunter);font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem 1rem;border-radius:999px;box-shadow:0 8px 18px rgba(0,0,0,.35);white-space:nowrap}
.peek__hint span::after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
.peek__hint.is-gone{opacity:0}
@keyframes hint-float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
.card3d{position:relative;width:100%;aspect-ratio:1843/1423;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.8,.2,1);cursor:pointer;will-change:transform;border-radius:4px}
.card3d.is-back{transform:rotateY(180deg)}
.card3d:focus-visible{outline:2px solid var(--manchester);outline-offset:8px}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden;background:var(--simply);box-shadow:0 26px 44px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}
.face img{display:block;width:100%;height:100%;object-fit:cover}
.face--back{transform:rotateY(180deg)}
.peek__which{margin:.9rem 0 0;text-align:center;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--manchester)}
@media (prefers-reduced-motion:reduce){
  .peek__scrim,.peek__panel{animation:none}.peek__hint{animation:none}
  .card3d{transition:none;transform:none!important}
  .face{transition:opacity .4s}.card3d .face--back{opacity:0;transform:none}.card3d.is-back .face--back{opacity:1}.card3d.is-back .face--front{opacity:0}
}

/* why it looks the way it does */
.peek__why{margin-top:1.75rem;background:var(--simply);color:var(--ink);border-radius:6px;padding:clamp(1.5rem,3.5vw,2.75rem)}
.peek__why h2{margin:0 0 .5rem;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--hunter)}
.peek__lede{margin:0 0 1.25rem;font-family:var(--serif);font-style:italic;color:var(--ink-soft);max-width:36rem}
.peek__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:46rem){.peek__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.peek__list li{background:var(--paper);padding:1rem 1.15rem;display:grid;gap:.3rem}
.peek__list b{font-family:var(--serif);font-weight:400;font-size:1.06rem;line-height:1.3;color:var(--hunter)}
.peek__list span{font-size:.92em;line-height:1.6;color:var(--ink-soft)}
.peek__foot{margin:1.1rem 0 0;font-family:var(--sans);font-size:.82rem;line-height:1.55;color:var(--louisburg-ink);max-width:40rem}
body.peek-open{overflow:hidden}
@media (min-width:46rem){.peek__list li:last-child:nth-child(odd){grid-column:1/-1}}