:root{
  --bg: #F8F6F3;     /* gallery white */
  --card: #F6F6F4;   /* subtle tonal lift */
  --name: #888888;   /* lighter graphite */
  --link: #555555;   /* mid graphite */
  --hover: #444444;
}

*{
  box-sizing: border-box;
}

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  font-family: "Source Serif 4", ui-serif, Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* stable viewport height */
.stage{
  height: 100vh;     /* fallback */
  height: 100svh;    /* stable viewport on iOS */
  display: grid;
  place-items: center;
}

/* slightly top-weighted (desktop) */
.stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-14vh);
}

/* link row */
.base{
  display: flex;
  gap: clamp(1.2rem, 4vw, 2.4rem);
}

/* subtle cards */
.cardlink{
  display: inline-block;
  background: var(--card);
  padding: 0.35rem 0.6rem;
  text-decoration: none;

  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: var(--link);
  text-transform: lowercase;
  letter-spacing: 0;
}

.cardlink:hover{
  color: var(--hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cardlink:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* name below links */
.name{
  margin: 0;
  margin-top: 3rem;      /* gently articulated gap */
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 400;
  color: var(--name);
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

/* mobile tuning */
@media (max-width: 600px){
  .stack{
    transform: translateY(-16svh);  /* stronger upward shift for iPhone */
  }

  .name{
    margin-top: 2.4rem;             /* slightly tighter mobile gap */
  }
}