/* ---------------------------------------------------------------------------
   jayapalan.com — gallery styles

   Direction: a photographer's wall. The photographs carry every bit of colour
   and texture, so the chrome stays a quiet, cool-neutral gallery surface and
   gets out of their way. The one place with personality is the name itself,
   set in Instrument Serif with the "Aju" in italic. No accent colour on
   purpose — the images are the accent.
--------------------------------------------------------------------------- */

:root {
  --paper: #f2f1ec; /* gallery-wall neutral */
  --ink: #17181a; /* near-black, slightly cool */
  --muted: #76746c; /* labels, meta */
  --hairline: #ddd9cf;

  --gap: 14px; /* space between tiles, and column gap */
  --page-max: 1340px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- banner --------------------------------------------------------------- */

.banner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem)
    clamp(1.75rem, 4vw, 2.75rem);
}

.banner__name {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.banner__name em {
  font-style: italic;
}

.banner__rule {
  width: 64px;
  height: 1px;
  background: var(--ink);
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 1rem;
}

.banner__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.banner__sub {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 3vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* --- mosaic (CSS columns) ------------------------------------------------- */

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}

.mosaic {
  column-count: 4;
  column-gap: var(--gap);
}
@media (max-width: 1100px) {
  .mosaic {
    column-count: 3;
  }
}
@media (max-width: 760px) {
  .mosaic {
    column-count: 2;
  }
}
@media (max-width: 440px) {
  .mosaic {
    column-count: 1;
  }
}

.tile {
  display: block;
  break-inside: avoid;
  margin: 0 0 var(--gap);
  border-radius: 2px;
  overflow: hidden;
  background: #e7e4db; /* placeholder tone while a thumb loads */
  cursor: zoom-in;
  /* reveal-on-scroll */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    box-shadow 0.25s ease;
}

.tile.is-in {
  opacity: 1;
  transform: none;
}

.tile img {
  display: block;
  width: 100%;
  height: auto;
}

.tile:hover {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
}

.tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- empty / error state -------------------------------------------------- */

.empty {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: #e7e4db;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: var(--ink);
}

/* --- footer --------------------------------------------------------------- */

.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- respect reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tile {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.25s ease;
  }
}