/* ————————————————————————————————
   IDRITH — abstract, cinematic, dark
   ———————————————————————————————— */

:root {
  --bg: #0b0d10;
  --deep: #07080a;
  --ink: #e8e6e1;
  --dim: #9a978f;
  --accent: #c8b48a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 300 1rem/1.6 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--deep); }

/* ————— Hero ————— */

.intro {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--deep);

  .content {
      position: relative; z-index: 2; padding: 0 3rem; text-align: center;

      .title {
          font-size: clamp(4.5rem, 16vw, 14rem);
          font-weight: 300;
          line-height: 0.85;
          letter-spacing: -0.03em;
      }

      .title_phonetic {
          margin-top: 0;
          color: var(--dim);
          font-size: clamp(0.8rem, 1.1vw, 0.95rem);
          letter-spacing: 0.06em;
          opacity: 0.75;

          em {
              font-style: italic;
              color: var(--ink);
          }
      }

      .subtitle {
          margin-top: 1.6rem;
          color: var(--dim);
          font-size: clamp(0.95rem, 1.4vw, 1.15rem);
          letter-spacing: 0.01em;
      }
  }
}

#field { position: absolute; inset: 0; width: 100%; height: 100%; }




@media (max-width: 640px) {
  .hero__content { padding: 0 1.4rem; }
}