/* ==========================================================================
   MERAKI — landing page: a masthead and two doors
   Each door is a real Kathmandu street, printed in its service colour.
   Wider than 900px the doors sit side by side; narrower they stack.
   ========================================================================== */

body.landing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

/* ---------- Masthead ---------- */
.masthead {
  position: relative; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(20px, 3vw, 52px); padding: 15px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule);
  transition: opacity .3s ease;
}
.masthead__def { max-width: 62rem; font-size: .98rem; font-weight: 400; line-height: 1.45; color: var(--ink-2); }
.masthead__def dfn { font: 600 1.08rem var(--serif); font-style: normal; color: var(--ink); }
.masthead__def .pron { margin: 0 .3em 0 .2em; color: var(--ink-3); }
.masthead__meta { display: flex; align-items: center; gap: 22px; font-size: .9rem; color: var(--ink-3); white-space: nowrap; }
.masthead__meta time { color: var(--ink); font-variant-numeric: tabular-nums; }
.masthead__meta a { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--ink); }

/* ---------- Doors ---------- */
.doors { position: relative; flex: 1; display: flex; min-height: 560px; }
.door {
  --deep: 10, 22, 56;
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--paper); background: rgb(var(--deep));
  transition: flex-grow .8s var(--ease), opacity .4s ease;
}
.door--online { --deep: 59, 8, 16; }
.door + .door { box-shadow: inset 1px 0 0 rgba(243, 238, 228, .38); }
.door__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1.6s var(--ease);
}
.door--office .door__img { object-position: 50% 28%; }
.door--online .door__img { object-position: 50% 42%; }
/* scrim: keeps the photo vivid at the top and right, and the words readable at the bottom left */
.door::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 75% at 0% 100%, rgba(var(--deep), .9) 0%, rgba(var(--deep), .78) 45%, rgba(var(--deep), 0) 80%),
    linear-gradient(to bottom,
      rgba(var(--deep), .78) 0%, rgba(var(--deep), .3) 22%, rgba(var(--deep), .4) 46%, rgba(var(--deep), .9) 78%, rgba(var(--deep), .97) 100%);
}
.door__title, .door__kicker, .door__word { text-shadow: 0 1px 28px rgba(var(--deep), .5); }
.door::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0a0806; opacity: 0; transition: opacity .6s var(--ease); }

/* the Nepali word, glossed like a dictionary entry */
.door__word { position: absolute; top: clamp(22px, 3.2vw, 48px); left: clamp(24px, 3.6vw, 60px); z-index: 1; display: grid; gap: 4px; pointer-events: none; }
.door__word b { font: 700 clamp(3.6rem, .6rem + 7.4vw, 8.6rem)/1 var(--serif); color: transparent; -webkit-text-stroke: 1.3px rgba(243, 238, 228, .66); }
.door__word small {
  justify-self: start; padding: 3px 8px 4px; border-radius: 2px; font-size: .84rem; letter-spacing: .01em;
  color: rgba(243, 238, 228, .92); background: rgba(var(--deep), .62);
}
.door__word i { font-style: normal; font-family: var(--serif); font-weight: 600; color: var(--paper); }

.door__inner { z-index: 1; width: min(100%, 700px); padding: 0 clamp(24px, 3.6vw, 60px) clamp(22px, 3.2vh, 40px); }
.door__kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px 5px 8px; margin-left: -8px; border-radius: 2px;
  font-weight: 600; font-size: .95rem; color: var(--paper); background: rgba(var(--deep), .55);
}
.door__kicker::before { content: ""; width: 10px; height: 10px; background: var(--paper); }
.door__title { margin-top: 16px; font: 600 clamp(2.9rem, 1.1rem + 4.4vw, 6.1rem)/.95 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.door__text { margin-top: 18px; max-width: 31rem; font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); line-height: 1.45; color: rgba(243, 238, 228, .9); }
.door__list { display: flex; flex-wrap: wrap; margin-top: 18px; font-size: .93rem; color: rgba(243, 238, 228, .86); }
.door__list li + li::before { content: "/"; margin: 0 .65em; opacity: .5; }
.door__cta { margin-top: 26px; }
.door__cta::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.door__cta:focus-visible { outline: none; }
.door__cta:focus-visible::after { outline: 2px solid var(--paper); outline-offset: -10px; }
.door__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(243, 238, 228, .3); }
.door__caption p { max-width: 31rem; font: 400 1rem/1.38 var(--serif); color: rgba(243, 238, 228, .86); }
.door__caption small { flex: none; font-size: .72rem; color: rgba(243, 238, 228, .66); }

/* ---------- Foot ---------- */
.landing-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 15px var(--gutter); background: var(--paper); border-top: 1px solid var(--rule); font-size: 1rem;
  transition: opacity .3s ease;
}
.landing-foot a { display: inline-flex; align-items: center; gap: .45em; margin-left: .35em; font-weight: 600; }
.landing-foot__meta { font-size: .9rem; color: var(--ink-3); }
.landing-foot__meta time { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Entrance ---------- */
.door__inner > *, .door__word { animation: up .9s var(--ease) backwards; }
.door__word { animation-delay: .1s; }
.door__inner > :nth-child(1) { animation-delay: .15s; }
.door__inner > :nth-child(2) { animation-delay: .22s; }
.door__inner > :nth-child(3) { animation-delay: .29s; }
.door__inner > :nth-child(4) { animation-delay: .36s; }
.door__inner > :nth-child(5) { animation-delay: .43s; }
.door__inner > :nth-child(6) { animation-delay: .5s; }
.door--online .door__inner > *, .door--online .door__word { animation-duration: 1.05s; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Hover: lean towards the door you're considering ---------- */
@media (hover: hover) and (min-width: 900px) {
  .door:hover, .door:focus-within { flex-grow: 1.16; }
  .door:hover .door__img { transform: scale(1.06); }
  .doors:hover .door:not(:hover)::after { opacity: .3; }
}

/* ---------- Choosing: the picked door fills the screen ---------- */
body.is-leaving .door:not(.is-chosen) { flex-grow: .0001; opacity: 0; }
body.is-leaving .door.is-chosen { flex-grow: 40; }
body.is-leaving .landing-foot { opacity: 0; }

/* ---------- Stacked ---------- */
@media (max-width: 899px) {
  body.landing { height: 100vh; height: 100svh; min-height: 600px; }
  .masthead { grid-template-columns: 1fr auto; row-gap: 10px; padding: 13px var(--gutter) 14px; }
  .masthead__def { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; line-height: 1.4; }
  .masthead__def dfn { font-size: 1rem; }
  .masthead__meta .clock { display: none; }
  .doors { flex-direction: column; min-height: 0; }
  .door { min-height: 0; }
  .door + .door { box-shadow: inset 0 1px 0 rgba(243, 238, 228, .38); }
  .door__word { display: none; }
  .door__inner { width: 100%; padding: 0 22px 20px; }
  .door__title { margin-top: 10px; font-size: clamp(2.3rem, 1.2rem + 6vw, 3.8rem); }
  .door__text { margin-top: 10px; font-size: 1rem; }
  .door__list, .door__caption { display: none; }
  .door__cta { margin-top: 16px; padding: .85rem 1.1rem; }
  .landing-foot { padding: 12px var(--gutter); font-size: .94rem; }
  .landing-foot__meta { display: none; }
}
@media (max-width: 899px) and (max-height: 760px) { .door__text { display: none; } }
@media (max-width: 899px) and (max-height: 640px) { .masthead__def { display: none; } }

@media (prefers-reduced-motion: reduce) { .door, .door__img { transition: none; } }