/* assets/styles.css */
:root { --bg:#000; --fg:#fff; --iconBar:88px; --pad:24px; }
@media (max-width:640px){ :root{ --iconBar:72px; --pad:16px; } }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--fg); overflow-x:hidden; }

main{
  min-height:100svh;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:#000;
}
.hero-link{ display:block; width:100%; text-align:center; }

.figure{
  width:100vw;
  height:calc(100svh - var(--iconBar) - (var(--pad)*2));
  height:calc(100vh - var(--iconBar) - (var(--pad)*2));
  display:grid; place-items:center; margin:0; padding:var(--pad); background:#000;
}
.figure picture,.figure img{
  max-width:calc(100vw - (var(--pad)*2));
  max-height:calc(100svh - var(--iconBar) - (var(--pad)*2));
  max-height:calc(100vh - var(--iconBar) - (var(--pad)*2));
  width:auto; height:auto; object-fit:contain; display:block; margin:0 auto;
}

/* Icon bar under image with top margin */
.icon-bar{
  height:var(--iconBar);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:20px; /* added top margin */
}
.icon-bar a{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  padding:10px; text-decoration:none; transition:transform .2s ease, opacity .2s ease, border-color .2s ease;
}
.icon-bar a:hover,.icon-bar a:focus{ transform:scale(1.06); opacity:.95; border-color:rgba(255,255,255,.4); }
.icon-bar img{ display:block; width:28px; height:28px; }

footer{ text-align:center; font:12px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:#b8b8b8; opacity:.8; margin:0 0 10px; }