/* ============================================================
   Landing — Klett.it index/main overlay
   Used by main.html (no sidebar) and as the pre-sidebar fallback
   for index.html. The post-sidebar look is controlled by
   .main in shared/sidebar.css.

   Cascade order:
     1. Foundation
     2. Typography
     3. Layout (wrapper + content slots + footer)
     4. Decrypt (email cipher)
   ============================================================ */

@import url("tokens.css");

/* ============================================================
   1. Foundation
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--base-deep);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================================
   2. Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: clamp(0.7rem, 2.5vw, 1.2rem);
}

h2 {
  font-size: clamp(0.6rem, 2vw, 1rem);
}

h3 {
  font-size: clamp(0.6rem, 2vw, 1rem);
  font-family: "Courier New", Courier, mono;
}

h1.KK   { letter-spacing: clamp(1px, 0.8vw, 3.2px); }
h2.ISS  { letter-spacing: clamp(0.5px, 0.3vw, 1px); }
h3.MAIL { letter-spacing: clamp(2px, 1.2vw, 5.1px); }

a,
a:link,
a:visited,
a:hover {
  color: var(--gold);
  text-decoration: none;
  font-family: "Courier New", Courier, mono;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
   3. Layout — overlay card
   ============================================================ */

#wrapper {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: var(--base-mid);
}

.content1 {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content1 img {
  width: clamp(60px, 20vw, 155px);
  height: auto;
}

.content2 {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: clamp(180px, 60vw, 280px);
}

.footer {
  position: absolute;
  bottom: clamp(12px, 4vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  color: var(--text);
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  white-space: nowrap;
}

/* ============================================================
   4. Decrypt — email cipher
   ============================================================ */

.decrypt {
  min-width: 50px;
  display: inline-block;
}

.decrypt:empty::before {
  content: "...";
  color: #999;
}

.decrypt a {
  color: var(--gold);
  text-decoration: none;
  font-family: "Courier New", Courier, mono;
}

.decrypt a:hover {
  text-decoration: underline;
}