/* cormorant-garamond-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/cormorant-garamond-v21-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



:root {
    --bg: #08070b;
    --ink: #e9e2d0;
    --gold: #c9a24b;
    --muted: #6e6878;
    --hairline: rgba(201, 162, 75, 0.25);
  }

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

  html, body { height: 100%; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
  }

  /* Vignette + feines Korn für Tiefe */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 42%, rgba(201,162,75,0.06), transparent 65%),
      radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 1;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 2rem;
  }

  .name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(3rem, 11vw, 7.5rem);
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: var(--ink);
    opacity: 0;
    animation: rise 1.6s ease 0.2s forwards;
  }

  .rule {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 2.2rem 0 2rem;
    animation: draw 1.4s ease 1.1s forwards;
  }

  .handle {
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    font-weight: 300;
    letter-spacing: 0.55em;
    text-indent: 0.55em; /* gleicht letter-spacing des letzten Zeichens aus */
    color: var(--gold);
    text-transform: lowercase;
    opacity: 0;
    animation: rise 1.4s ease 1.6s forwards;
  }

  .handle .glyph {
    display: inline-block;
    transition: opacity 0.15s;
  }

  .handle .cursor {
    display: inline-block;
    width: 0.55em;
    margin-left: 0.1em;
    color: var(--gold);
    animation: blink 1.2s steps(1) infinite;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes draw {
    from { width: 0; }
    to   { width: min(320px, 60vw); }
  }
  @keyframes blink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0; }
  }

  footer {
    position: relative;
    z-index: 2;
    padding: 1.4rem 1.8rem;
    display: flex;
    gap: 1.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  footer a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.25s, border-color 0.25s;
  }

  footer a:hover,
  footer a:focus-visible {
    color: var(--gold);
    border-color: var(--hairline);
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .name, .handle { animation: none; opacity: 1; }
    .rule { animation: none; width: min(320px, 60vw); }
    .handle .cursor { animation: none; }
  }