/* ---------- Tokens ---------- */
:root{
  --bg: rgb(215,215,215); /* D:215 G:215 B:215 */
  --text: #000;           /* pure black */
  --muted: #3a3a3a;       /* subtle secondary */
  --pad: 16px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "EB Garamond", Garamond, "Times New Roman", Times, serif;
  font-weight:500; /* Medium */
  line-height:1.45;
  font-size: clamp(15px, 1.05vw + 0.4rem, 18px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Nav ---------- */
.site-header{
  position:fixed;
  top:12px; left:12px;
  z-index:10;
}
.nav{
  display:flex;
  gap:20px;
  align-items:center;
  letter-spacing:0.005em;
}
.nav a{
  color:var(--text);
  text-decoration:none;
}
.nav a:hover{ text-decoration:underline; }
.nav .brand{ font-weight:500; }

/* Greyed placeholders for future sections */
.muted[aria-disabled="true"]{
  color:var(--muted);
  cursor:default;
  text-decoration:none;
}

/* ---------- Center ---------- */
.stage{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding: max(8vh, 96px) 6vw;
}
.center-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.center-media{
  width:min(48vmin, 520px);
  max-width:90vw;
  height:auto;
  display:block;
  border:0;
}
.caption{
  font-size:0.95rem;
  letter-spacing:0.02em;
}

/* ---------- Footer ---------- */
.site-footer{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.92rem;
  color:var(--muted);
  pointer-events:none;
}
.site-footer a{
  pointer-events:auto;
  color:var(--text);
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }
.footer-right{ display:flex; gap:10px; align-items:center; }
.footer-right .dot{ color:var(--muted); }

/* ---------- Small screens ---------- */
@media (max-width: 520px){
  .nav{ gap:14px; }
  .site-header{ top:10px; left:10px; }
  .site-footer{ left:10px; right:10px; bottom:10px; font-size:0.86rem; }
}