/* ── the choosing page ──────────────────────────────────────
   Two doors, nothing else. It borrows main.css for the palette and the faces,
   so the villa pages and this one cannot drift apart. */

.pick{
  min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--ink); color:var(--bone);
}

.pick__top{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding:clamp(2rem,5vh,3.4rem) var(--pad) clamp(1.2rem,3vh,2rem);
  text-align:center;
}
.pick__mark{ width:clamp(11rem,26vw,17rem); height:auto; }
.pick__eyebrow{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; opacity:.6;
}

/* Two panels, equal until one is asked for. */
.pick__doors{
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:rgba(241,234,217,.12);
  min-height:min(66vh, 40rem);
}

.door{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.5rem,4vw,3rem);
  text-decoration:none; color:var(--bone);
  isolation:isolate;
}
.door__img{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1), filter .6s;
  filter:saturate(.9) brightness(.62);
}
/* The gradient is what keeps the type legible over any photograph that gets
   dropped in later, rather than relying on this particular image being dark
   in this particular corner. */
.door::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(12,11,8,.88) 0%, rgba(12,11,8,.45) 45%, rgba(12,11,8,.15) 100%);
}
.door:hover .door__img,
.door:focus-visible .door__img{ transform:scale(1.10); filter:saturate(1) brightness(.72); }

.door__num{
  font-family:var(--font-display);
  font-size:clamp(3.2rem,9vw,6.5rem); line-height:.9;
  color:var(--amber-2); margin-bottom:.4rem;
  text-shadow:0 2px 18px rgba(12,11,8,.8);
}
.door__name{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.1; margin-bottom:.5rem;
}
.door__line{
  font-size:clamp(.9rem,1.5vw,1.02rem); font-weight:300;
  max-width:24rem; opacity:.85; margin-bottom:1.2rem;
}
.door__cta{
  display:inline-flex; align-items:center; gap:.55rem; align-self:flex-start;
  padding:.7rem 1.15rem;
  border:1px solid rgba(241,234,217,.35); border-radius:var(--r);
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, border-color .25s, color .25s;
}
.door:hover .door__cta,
.door:focus-visible .door__cta{
  background:var(--amber-2); border-color:var(--amber-2); color:var(--ink);
}
.door__cta i{ font-style:normal; transition:transform .25s; }
.door:hover .door__cta i{ transform:translateX(3px); }

/* The whole panel is the link, so the focus ring belongs on the panel. */
.door:focus-visible{ outline:2px solid var(--amber-2); outline-offset:-6px; }

.pick__foot{
  display:flex; justify-content:center; gap:1.6rem; flex-wrap:wrap;
  padding:1.2rem var(--pad) 1.6rem;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.pick__foot a{ color:var(--bone); opacity:.65; text-decoration:none; transition:opacity .2s, color .2s; }
.pick__foot a:hover{ opacity:1; color:var(--amber-2); }

/* Stacked on a phone: two doors side by side leaves neither readable. */
@media (max-width: 760px){
  .pick__doors{ grid-template-columns:1fr; }
  .door{ min-height:44vh; }
}
@media (prefers-reduced-motion: reduce){
  .door__img{ transition:none; }
  .door:hover .door__img{ transform:scale(1.04); }
}