/* Gate / homepage — dark cinematic entry screen */
:root{
  --ink:#1a1a1a;--bone:#d6d5da;--bone-dim:#979798;--ox:#ba8935;--line-2:rgba(214,213,218,0.34);
  --noise-opacity:0.06;
}
body{background:var(--ink);color:var(--bone);overflow:hidden}

/* ---- background loop ---- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#1a1a1a url("https://images.pexels.com/videos/29733072/pexels-photo-29733072.jpeg?auto=compress&cs=tinysrgb&w=1280") center/cover no-repeat}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(0.5)}
.scrim{position:fixed;inset:0;z-index:1;background:
    radial-gradient(110% 80% at 50% 36%, rgba(186,137,53,0.22), transparent 60%),
    linear-gradient(180deg,rgba(26,26,26,0.55),rgba(26,26,26,0.4) 40%,rgba(26,26,26,0.82))}

/* ---- top + bottom micro labels ---- */
.top,.bot{position:fixed;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:20px 30px;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--bone-dim)}
.top{top:0}
.bot{bottom:0;justify-content:center}

/* ---- center ---- */
.center{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.kicker{font-size:12px;letter-spacing:0.34em;text-transform:uppercase;color:var(--ox);margin-bottom:18px}
.word img{width:clamp(280px,42vw,620px);filter:drop-shadow(0 6px 40px rgba(0,0,0,0.6))}
.word sup{font-size:0.16em;vertical-align:super;color:var(--bone-dim)}
.line{font-family:"Roboto Mono",monospace;font-weight:400;font-size:16px;line-height:22px;letter-spacing:-0.3px;color:var(--bone);margin-top:14px;opacity:.9;text-transform:uppercase}

/* ---- the two doors ---- */
.doors{display:flex;gap:0;margin-top:48px;border:1px solid var(--line-2)}
.door{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 40px;cursor:pointer;transition:background .25s,color .25s;min-width:230px;flex:1}
.door + .door{border-left:1px solid var(--line-2)}
.door .dlab{font-family:"Roboto Mono",monospace;font-weight:500;font-size:16px;line-height:22px;letter-spacing:-0.6px;text-transform:uppercase}
.door .dsub{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bone-dim);transition:color .25s}
.door .arr{margin-top:6px;font-size:15px;color:var(--ox);transition:transform .25s,color .25s}
.door:hover{background:var(--ox);color:var(--ink)}
.door:hover .dsub{color:var(--ink)}
.door:hover .arr{color:var(--ink);transform:translateX(6px);font-weight:700}

.social-icons{display:flex;gap:18px}
.social-icons a{color:var(--bone-dim);display:inline-flex;transition:color .2s}
.social-icons a:hover{color:var(--ox)}

@media(max-width:560px){
  .doors{flex-direction:column}
  .door + .door{border-left:none;border-top:1px solid var(--line-2)}
  .door{min-width:240px}

  /* keep "Est. 2018" and the location string on one line each — at 11px they
     need 370px but only ~315px is available at 375px wide. 9px + a tighter
     gutter fits with room to spare, and preserves the 0.24em tracking. */
  .top{font-size:9px;padding-left:20px;padding-right:20px}
}

/* below ~350px even 9px wraps — step down once more */
@media(max-width:350px){
  .top{font-size:8px}
}