/* Landing: one screen — background video, a short statement, three doors. */
html,body{height:100%}
.stage{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; isolation:isolate; overflow:hidden}
.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; background:#03070c}
.shade{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,11,18,.72) 0%,rgba(6,11,18,.25) 28%,rgba(6,11,18,.55) 58%,rgba(6,11,18,.94) 100%)}
.top{display:flex; justify-content:space-between; align-items:center; width:100%; padding-top:max(18px, env(safe-area-inset-top)); padding-bottom:18px}
.top .langs{background:rgba(6,11,18,.4)}
.intro{flex:1; display:flex; flex-direction:column; justify-content:flex-end; width:100%; padding-top:40px; padding-bottom:8px}
.intro .label{color:#b9c4cf}
.intro .display{text-shadow:0 1px 24px rgba(0,0,0,.45); max-width:14ch}
html:lang(ko) .intro .display{max-width:none}
.intro .lead{color:#d5dce2; text-shadow:0 1px 12px rgba(0,0,0,.6); margin-bottom:30px}

.doors{display:grid; border-top:1px solid rgba(232,236,239,.35)}
.door{display:grid; grid-template-columns:34px 1fr; column-gap:10px; row-gap:2px; padding:16px 0; border-bottom:1px solid rgba(232,236,239,.2); text-decoration:none; color:var(--ink)}
.door .num{grid-row:1 / span 2; padding-top:6px}
.door-t{font-family:var(--serif); font-size:22px; line-height:1.25; letter-spacing:-.01em}
html:lang(ko) .door-t{font-weight:500; letter-spacing:-.03em; font-size:20px}
.door-t::after{content:" →"; font-family:var(--sans); font-size:.8em; color:var(--accent); transition:margin .2s}
.door-d{font-size:14px; color:#aeb9c4; line-height:1.5}
.door:hover .door-t{color:var(--accent)}

.bottom{display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; padding-top:16px; padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.note{margin:0; font-size:12px; color:#8b97a4}
.toggle{flex:none; background:none; border:1px solid var(--rule2); color:#c4ccd4; font:500 11.5px var(--mono); letter-spacing:.06em; padding:7px 10px; cursor:pointer}

@media (min-width:760px){
  .intro{padding-bottom:20px}
  .doors{grid-template-columns:repeat(3,1fr); border-top:0}
  .door{border-top:1px solid rgba(232,236,239,.35); border-bottom:0; padding:18px 28px 6px 0; margin-right:24px}
  .door-t{font-size:24px}
  .shade{background:
    linear-gradient(90deg,rgba(6,11,18,.7) 0%,rgba(6,11,18,.3) 55%,rgba(6,11,18,.15) 100%),
    linear-gradient(180deg,rgba(6,11,18,.6) 0%,transparent 30%,rgba(6,11,18,.5) 65%,rgba(6,11,18,.92) 100%)}
}