/* splash.css: the front door (site/index.html). Uses the variables from site.css. */
.splash { background: var(--bg); }
.plain-escape { max-width: none; margin: 0; padding: 0.6rem var(--gap); text-align: right; font-family: var(--font-mono); font-size: 0.95rem; }
.splash-wrap { max-width: 64rem; margin: 0 auto; padding: 0.5rem var(--gap) 3rem; text-align: center; }
.selfie {
  width: 192px; height: 192px; image-rendering: pixelated; image-rendering: crisp-edges;
  border: 6px solid var(--text); border-radius: 12px; box-shadow: 8px 8px 0 var(--support-1);
}
.splash-name { margin: 1.2rem 0 0.4rem; }
.splash-name .pill { font-size: clamp(2.2rem, 8vw, 4.5rem); }
.splash-tagline { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0.6rem auto; }
.splash-sub { color: var(--muted); margin: 0.4rem auto 1.8rem; }

.doors { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); max-width: none; }
.door {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; height: 100%;
  padding: 1.2rem 1rem 1.4rem; text-decoration: none; color: var(--text);
  border: 3px solid var(--text); border-radius: 14px 14px 6px 6px; background: var(--bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.door:hover, .door:focus-visible { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--accent); }
.door-name { font-family: var(--font-mono); font-weight: 800; font-size: 1.4rem; color: var(--accent); }
.door-desc { font-size: 0.98rem; }

/* Door pictures: original CSS drawings. */
.door-art { width: 96px; height: 96px; display: block; position: relative; }
.door-castle .door-art {
  background:
    linear-gradient(#1b1630, #1b1630) 38px 56px / 20px 40px no-repeat,     /* gate */
    linear-gradient(#5b5f73, #5b5f73) 8px 32px / 80px 64px no-repeat,      /* wall */
    linear-gradient(#5b5f73, #5b5f73) 8px 20px / 14px 12px no-repeat,
    linear-gradient(#5b5f73, #5b5f73) 41px 20px / 14px 12px no-repeat,
    linear-gradient(#5b5f73, #5b5f73) 74px 20px / 14px 12px no-repeat,
    linear-gradient(#ffcc33, #ffcc33) 46px 0 / 4px 20px no-repeat;         /* flag pole */
}
.door-castle .door-art::after { content: ""; position: absolute; left: 50px; top: 0; width: 16px; height: 10px; background: #b8400c; }
.door-dial .door-art {
  border-radius: 18px; background: #e2ece6; border: 3px solid #1d1d1f;
}
.door-dial .door-art::before { content: ""; position: absolute; left: 14px; top: 8px; width: 62px; height: 26px; background: #0b5e44; border-radius: 4px; }
.door-dial .door-art::after { content: ""; position: absolute; left: 24px; top: 40px; width: 42px; height: 42px; border-radius: 50%; border: 12px solid #5a3b8c; box-sizing: border-box; background: #f2efe9; }
.door-plain .door-art { background:
    linear-gradient(#161616, #161616) 6px 44px / 70px 6px no-repeat,
    linear-gradient(#161616, #161616) 6px 58px / 80px 6px no-repeat,
    linear-gradient(#161616, #161616) 6px 72px / 56px 6px no-repeat;
  border: 3px solid #161616; border-radius: 6px; }
.door-plain .door-art::before { content: ""; position: absolute; left: 3px; top: 7px; width: 80px; height: 22px; border-radius: 11px; background: var(--accent); }

.splash-links { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; font-weight: 600; }