/* ─────────────────────────────────────────────────────────────────────────────
   MOHR  - homepage gateway (/). Two full-bleed evergreen panels in the manner
   of a luxury-house landing page: edge to edge, split by a hairline, a small
   centred wordmark above, wide-tracked uppercase names and a quiet "Discover"
   link beneath each. Side by side on desktop, stacked on mobile.
   Shared tokens from mohr.css only: no new colours or fonts.
   ───────────────────────────────────────────────────────────────────────────── */
/* The homepage has no sticky booking bar, so it must not inherit the bottom
   padding mohr.css reserves for one on phones (that pushed the page past
   one screen). */
body{background:var(--evergreen-dark);padding-bottom:0 !important;}
.gate{position:relative;min-height:100vh;min-height:100dvh;display:flex;padding:0;background:var(--evergreen-dark);}
.gate__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;}

/* wordmark: small, centred, sitting over the seam; logo art is evergreen,
   so it is knocked out to cream */
.gate__brand{
  position:absolute;top:clamp(24px,4vh,44px);left:50%;transform:translateX(-50%);z-index:2;
  display:block;line-height:0;
}
.gate__brand img{width:clamp(96px,9vw,132px);height:auto;filter:brightness(0) invert(1);opacity:.92;}

.gate__tabs{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:color-mix(in srgb,var(--cream) 22%,var(--evergreen));}
@media(max-width:767px){.gate__tabs{grid-template-columns:1fr;}}

.gate__tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  min-height:50vh;padding:120px 32px 64px;text-align:center;text-decoration:none;
  background:var(--evergreen);color:var(--cream);
  transition:background .6s var(--ease);
}
.gate__tab{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
/* Hover only where a real pointer can hover: on touch screens a tapped panel
   would otherwise stay "stuck" dark after the user comes back. */
@media(hover:hover){.gate__tab:hover{background:var(--evergreen-dark);color:var(--cream);}}
.gate__tab:active{background:var(--evergreen-dark);}
.gate__tab:focus-visible{outline:2px solid var(--cream);outline-offset:-12px;}

.gate__name{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,76px);letter-spacing:.14em;line-height:1.1;
  padding-left:.14em; /* balance the trailing tracking so the word centres */
}
.gate__tagline{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.6vw,24px);letter-spacing:.02em;line-height:1.35;
  color:color-mix(in srgb,var(--cream) 88%,transparent);
  margin-top:-10px;max-width:22em;
}
.gate__more{
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  padding:0 0 6px .28em;border-bottom:1px solid color-mix(in srgb,var(--cream) 55%,transparent);
  color:color-mix(in srgb,var(--cream) 88%,transparent);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
@media(hover:hover){.gate__tab:hover .gate__more{border-bottom-color:var(--cream);color:var(--cream);}}
.gate__tab:active .gate__more{border-bottom-color:var(--cream);color:var(--cream);}

/* Phones: the two panels split the screen exactly in half, so both choices
   are visible at once with no scrolling. Each panel is one big tap target.
   Heights use svh (the viewport with the browser bars showing) so the second
   panel's "Discover" is never hidden behind Safari/Chrome's bottom toolbar. */
@media(max-width:767px){
  .gate{min-height:100vh;min-height:100svh;flex-direction:column;}
  .gate__brand{top:calc(env(safe-area-inset-top,0px) + clamp(18px,3.2svh,32px));padding:10px 14px;margin-top:-10px;}
  .gate__brand img{width:clamp(88px,26vw,112px);}
  .gate__tabs{grid-template-rows:1fr 1fr;}
  .gate__tab{
    min-height:0;gap:clamp(12px,2.4svh,20px);
    padding:clamp(72px,11svh,104px) max(20px,env(safe-area-inset-left,0px)) clamp(28px,5svh,48px);
  }
  .gate__tab + .gate__tab{padding-top:clamp(28px,5svh,48px);padding-bottom:calc(clamp(28px,5svh,48px) + env(safe-area-inset-bottom,0px));}
  /* stack "MOHR" over the name on both panels so they read as a matched pair */
  .gate__name{font-size:clamp(30px,9.4vw,40px);letter-spacing:.12em;padding-left:.12em;width:min-content;}
  .gate__tagline{font-size:clamp(16px,4.6vw,19px);margin-top:-4px;max-width:19em;text-wrap:balance;}
  .gate__more{font-size:12px;padding:12px 0 8px .28em;margin-top:-6px;}
}
/* Very short phones (iPhone SE, small Androids): tighten so it still fits. */
@media(max-width:767px) and (max-height:640px){
  .gate__tab{gap:10px;padding-top:64px;}
  .gate__name{font-size:clamp(28px,8.6vw,34px);}
  .gate__tagline{font-size:15px;}
}
/* Phones held sideways: side by side, compact, so both fit above the fold. */
@media(max-height:520px) and (orientation:landscape){
  .gate{flex-direction:row;}
  .gate__tabs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;}
  .gate__brand{top:14px;}
  .gate__brand img{width:84px;}
  .gate__tab,.gate__tab + .gate__tab{min-height:100vh;min-height:100svh;gap:12px;
    padding:64px max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));}
  .gate__name{font-size:clamp(26px,4.2vw,36px);width:auto;}
  .gate__tagline{font-size:15px;}
}
@media(prefers-reduced-motion:reduce){.gate__tab,.gate__more{transition:none;}}