:root {
  --bg: #fafafa; --fg: #1a1a1a; --muted: #777;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161616; --fg: #eee; --muted: #999; }
}
body {
  margin: 0;
  padding: 20px 20px 40px 15vw; /* wide left margin */
  background: var(--bg); color: var(--fg);
  font-family: Georgia, "Times New Roman", serif;
}
nav { margin-bottom: 20px; font-size: 15px; }
nav a { color: var(--fg); text-decoration: none; margin-right: 14px; }
nav a.active { text-decoration: underline; }

/* Home */
.doodle { display: block; margin-bottom: 24px; color: var(--fg); }
.bio p {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.4; max-width: 26em; margin: 0 0 1em;
}
.contact { margin-top: 72px; }
.contact p { font-size: clamp(1rem, 1.6vw, 1.3rem); margin: 0 0 0.4em; color: var(--muted); }
.contact a { color: var(--fg); }
.contact p { width: fit-content; }
@media (hover: hover) {
  .contact p:hover { font-style: italic; }
}

/* Spiral cursor on the home page only (<body class="home">) */
body.home {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 16 a2 2 0 0 1 4 0 a4 4 0 0 1 -8 0 a6 6 0 0 1 12 0 a8 8 0 0 1 -16 0 a10 10 0 0 1 20 0 a12 12 0 0 1 -24 0' fill='none' stroke='%23e0533d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, auto;
}
body.home a { cursor: pointer; }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
  gap: 10px;
}
.gallery a { display: block; position: relative; overflow: hidden; color: #fff; text-decoration: none; }
.gallery a::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: rgba(0,0,0,0.6);
  font: 14px sans-serif;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 1; transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .gallery img:hover { opacity: 0.5; }
  .gallery a:hover::after { opacity: 1; transform: translateY(0); }
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.big  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 700px) {
  body { padding-left: 20px; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}