:root{
    --bg:#0a0b0d;
    --ink:#e9e6df;
    --dim:rgba(233,230,223,.42);
    --hair:rgba(233,230,223,.16);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg);color:var(--ink);
    font-family:'Jost',system-ui,sans-serif;
    overflow:hidden;height:100vh;
  }

  #field{
    position:fixed;inset:0;width:100%;height:100%;display:block;
    z-index:0;filter:blur(7px) brightness(1.06) contrast(1.04);image-rendering:auto;
  }
  /* hidden photographs, revealed only by light — emerge (screen), never darken */
  #reveal{
    position:fixed;inset:0;width:100%;height:100%;display:block;
    z-index:0;pointer-events:none;
    mix-blend-mode:screen;
    opacity:.17;
    filter:blur(1.2px);
  }
  #glow{
    position:fixed;top:0;left:0;
    width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;
    background:radial-gradient(circle, rgba(233,230,223,.06) 0%, rgba(233,230,223,0) 60%);
    pointer-events:none;z-index:1;opacity:0;
    transition:opacity 1.2s ease;will-change:transform;
  }

  /* film grain — a touch coarser than fine, soft edges */
  #grain{
    position:fixed;inset:0;width:100%;height:100%;
    z-index:2;pointer-events:none;
    mix-blend-mode:overlay;
    opacity:.095;
    image-rendering:auto;   /* smooth, organic grain (not crisp/digital) */
  }

  #veil{
    position:fixed;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(10,11,13,0) 30%, rgba(6,7,8,.62) 100%);
  }

  .stage{
    position:fixed;inset:0;z-index:4;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:2rem;
  }
  .wordmark{
    font-family:'Cormorant Garamond',serif;font-weight:300;
    font-size:clamp(3.4rem,13vw,9.5rem);
    letter-spacing:.14em;line-height:1;text-indent:.14em;
    color:var(--ink);text-shadow:0 0 38px rgba(233,230,223,.10);
    opacity:0;transform:translateY(16px);
    animation:rise 1.6s cubic-bezier(.2,.7,.2,1) .25s forwards;
  }
  .tagline{
    margin-top:1.7em;font-weight:300;text-transform:uppercase;
    letter-spacing:.46em;text-indent:.46em;
    font-size:clamp(.6rem,1.5vw,.78rem);color:var(--dim);
    opacity:0;transform:translateY(12px);
    animation:rise 1.6s cubic-bezier(.2,.7,.2,1) .6s forwards;
  }
  /* the line quietly performs itself: even tonal steps, shadow -> and -> light */
  .tagline .sh{color:rgba(233,230,223,.34)}
  .tagline .md{color:rgba(233,230,223,.44)}
  .tagline .li{color:rgba(233,230,223,.54)}
  .entries{
    margin-top:clamp(3rem,8vh,5.5rem);
    display:flex;align-items:center;gap:1.9rem;
    opacity:0;transform:translateY(12px);
    animation:rise 1.6s cubic-bezier(.2,.7,.2,1) 1s forwards;
  }
  .entry{
    position:relative;font-weight:300;text-transform:uppercase;
    letter-spacing:.34em;text-indent:.34em;font-size:.82rem;
    color:var(--dim);text-decoration:none;padding:.4em 0;transition:color .6s ease;
  }
  .entry::after{
    content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;
    background:var(--ink);transform:translateX(-50%);
    transition:width .5s cubic-bezier(.2,.7,.2,1);
  }
  .entry:hover{color:var(--ink)}
  .entry:hover::after{width:100%}
  .sep{width:1px;height:1.15em;background:var(--hair)}
  .corner{
    position:fixed;z-index:4;bottom:1.8rem;right:2rem;
    font-weight:300;text-transform:uppercase;
    letter-spacing:.3em;text-indent:.3em;font-size:.66rem;
    color:var(--dim);text-decoration:none;transition:color .6s ease;
    opacity:0;animation:fade 2s ease 1.6s forwards;
  }
  .corner:hover{color:var(--ink)}

  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  @keyframes fade{to{opacity:1}}

  @media (max-width:560px){
    .entries{flex-direction:column;gap:1.2rem}
    .sep{display:none}
    .wordmark{letter-spacing:.1em;text-indent:.1em}
    .corner{bottom:1.2rem;right:1.2rem}
  }
  @media (prefers-reduced-motion:reduce){
    .wordmark,.tagline,.entries,.corner{animation:none;opacity:1;transform:none}
  }