:root {
  --ink: #111111;
  --ink-dim: rgba(17, 17, 17, 0.55);
  --ink-faint: rgba(17, 17, 17, 0.32);
  --line: rgba(17, 17, 17, 0.12);
  --panel: rgba(255, 255, 255, 0.9);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.13);
  --wall: #f1f0ee;   /* neutral wall behind the framed canvas */
  --space-1: #0d0f1f; /* deep space, near */
  --space-2: #05060d; /* deep space, far */
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--wall);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- The DVD screensaver ---------------------------------------- */
/* Lives inside the mounting board and is driven by JS, so it bounces within
   the white panel rather than the whole page. It rides on top of everything
   in the board; pointer-events:none means it never intercepts a tile click. */
.dvd {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  line-height: 0;
}

/* The logo is a white-on-black PNG used as an alpha mask, so the wordmark can
   be painted in whatever colour the bounce is currently cycling through. */
.dvd span {
  display: block;
  width: 168px;
  height: 56px;
  background-color: #ff4400;
  -webkit-mask-image: url("images/kmufti-logo.png?v=1");
  mask-image: url("images/kmufti-logo.png?v=1");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.25s ease;
}

@media (max-width: 620px) {
  .dvd span { width: 116px; height: 39px; }
}

/* The legendary exact-corner hit. */
@keyframes dvd-corner {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.dvd span.corner { animation: dvd-corner 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }

/* ---------- Header ------------------------------------------------------ */
.site-header {
  flex: 0 0 auto;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: lowercase;
}

.header-left {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.brand {
  color: var(--ink);
  font-weight: 500;
}

.header-link {
  color: var(--ink-dim);
  transition: color 0.15s ease;
}

.header-link:hover {
  color: var(--ink);
}

/* ---------- The launcher: centered app grid ----------------------------- */
.hub {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 34px;
  padding: 60px 24px 72px;
}

.hub-tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* A "mounting board" behind the posters: an opaque matte with a border gives
   the tiles (and the tagline) a clean, protected margin, so a drawing that
   covers the whole canvas stops at this frame instead of crowding the tiles. */
.app-board {
  position: relative;   /* positioning context for the screensaver */
  overflow: hidden;     /* keeps it inside the rounded panel */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 1320px;
  padding: 26px 30px 30px;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 26px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.06);
}

.apps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 30px;
  max-width: 1400px;
}

/* Each app is a graphical rectangle "poster" + label. */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 340px;
  text-align: center;
  transition: transform 0.18s ease;
}

.app:hover {
  transform: translateY(-4px);
}

.app.soon {
  cursor: default;
  opacity: 0.5;
}

.app.soon:hover {
  transform: none;
}

.app-art {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.19);
  transition: box-shadow 0.18s ease;
}

.app:hover .app-art {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

.app-art svg,
.app-art .app-art-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.app-art-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 82px;
}

.app-label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.2px;
}

.app-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-faint);
  margin-top: -9px;
}

/* ---------- Deep space: the footer below the launcher ------------------ */
.deep-space {
  position: relative;
  flex: 0 0 auto; /* a section below the frame; scroll down to reach it */
  min-height: 340px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 24px;
  background:
    radial-gradient(1200px 320px at 50% -30%, #1c2044 0%, transparent 70%),
    linear-gradient(180deg, var(--space-1) 0%, var(--space-2) 100%);
  color: rgba(255, 255, 255, 0.75);
}

/* A faint scatter of stars. */
.deep-space::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 40%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 24% 72%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 42% 28%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 57% 76%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 70% 44%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 83% 24%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 91% 64%, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0.9;
  pointer-events: none;
}

.handles {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 1px;
}

.handles a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease;
}

.handles a:hover {
  color: #fff;
}

.deep-caption {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
}

/* The quiet part, said out loud. */
.deep-wink {
  margin-top: -4px;
  color: rgba(255, 255, 255, 0.26);
}

.deep-wink a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.deep-wink a:hover { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 620px) {
  .hub { padding: 36px 14px 56px; }
  .app-board { padding: 20px 16px 24px; border-radius: 20px; }
  .app { width: 100%; max-width: 340px; }
}