/* Vars */
:root { --header-h:56px; --footer-h:56px; }

/* Base layout: header | canvas | footer */
html, body { margin:0; height:100%; background:#fff; color:#1a1a1a; font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
body {
  min-height:100dvh;
  display:grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  overflow:hidden;
}
a { color:#1a1a1a; text-decoration:underline; }

/* Header */
.header {
  display:flex; align-items:center; justify-content:flex-end;
  height:var(--header-h); padding:0 16px; box-sizing:border-box;
}
.header nav { display:flex; gap:10px; font-size:.75rem; }

/* Canvas fills the middle row */
#canvas {
  min-height:0; /* allow proper flex centering within grid */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}

/* Logo */
.logo img { height:min(35vh, 280px); width:auto; display:block; }

/* Age notice */
.age-note { margin-top:16px; font-size:.85rem; line-height:1.5; color:#333; }

/* Footer */
.footer {
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  background:#1a1a1a; color:#fff; text-align:center;
  padding:0 10px; font-size:.8rem; letter-spacing:1px; box-sizing:border-box;
}