/* VLC Circle - city gate.
   Must land in a single fold on desktop and laptop: every size below is
   capped against viewport HEIGHT (svh), not just width, so short laptop
   screens shrink the composition rather than pushing it past the fold. */

.vlc-gate-body{background:var(--vlc-surface)}

.vlc-gate{position:relative;max-width:1180px;margin:0 auto;
  min-height:100svh;
  padding:clamp(16px,3svh,40px) var(--vlc-md) clamp(14px,2.6svh,34px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:0}

.vlc-gate__switch{position:absolute;top:clamp(14px,2.4svh,32px);right:var(--vlc-md);
  display:inline-flex;border-radius:var(--vlc-r-md);overflow:hidden;background:#F4EDE2}
.vlc-gate__switch .vlc-cityswitch__opt{padding:4px 16px;font-size:.78rem;
  text-decoration:none;color:var(--vlc-ink)}
.vlc-gate__switch .vlc-cityswitch__opt:first-child{background:var(--vlc-peach);font-weight:500}

/* Horizontal lockup: size on width, not height \u2014 the stacked mark was
   1.46:1, this one is 3.55:1, so height clamps read far too small. */
.vlc-gate__logo{width:clamp(190px,26vw,330px);height:auto;
  margin:0 auto clamp(18px,4.4svh,46px)}

.vlc-gate__eyebrow{color:var(--vlc-muted);
  font-size:clamp(.78rem,1.7svh,.98rem);
  margin:0 0 clamp(6px,1.2svh,14px);max-width:none}

.vlc-gate__title{font-size:clamp(1.9rem,7.2svh,4.2rem);line-height:1.02;
  font-weight:700;margin:0 0 clamp(20px,5svh,60px);color:var(--vlc-ink)}

.vlc-gate__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,3vw,48px);width:100%;max-width:820px;margin:0 auto}

.vlc-gate__card{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(12px,3svh,32px);
  padding:clamp(14px,3svh,42px) clamp(12px,2vw,28px);
  text-decoration:none;color:var(--vlc-ink);background:transparent;
  border-radius:var(--vlc-r-md);
  transition:background-color .22s ease,transform .22s ease}
.vlc-gate__card:hover,.vlc-gate__card:focus-visible{background:var(--vlc-bg)}

.vlc-gate__icon{height:clamp(74px,19svh,168px);width:auto;display:block}

.vlc-gate__city{font-size:clamp(1.1rem,3svh,1.9rem);font-weight:300;
  letter-spacing:.01em;color:var(--vlc-ink);line-height:1.1}

.vlc-gate__note{margin:clamp(18px,4.4svh,52px) 0 0;
  color:var(--vlc-muted);font-size:clamp(.76rem,1.6svh,.94rem);max-width:none}

@media (prefers-reduced-motion: no-preference){
  .vlc-gate__card:hover{transform:translateY(-3px)}
}

/* Very short viewports: drop the eyebrow rather than break the fold. */
@media (max-height:560px) and (min-width:641px){
  .vlc-gate__eyebrow{display:none}
  .vlc-gate__logo{margin-bottom:clamp(10px,2.4svh,20px)}
}

@media (max-width:640px){
  .vlc-gate{min-height:100svh;justify-content:center;
    padding-block:var(--vlc-md)}
  .vlc-gate__grid{grid-template-columns:1fr 1fr;gap:8px;max-width:420px}
  .vlc-gate__switch{position:absolute;top:14px;right:var(--vlc-sm)}
  .vlc-gate__icon{height:clamp(64px,13svh,110px)}
  .vlc-gate__city{font-size:1.05rem}
}