/* Surf UI — Night & Day gallery
   Masonry of equal-width columns: every image at its own aspect ratio,
   never cropped. 4px gaps. Night / day meet at a hard cut — no gradient. */

:root {
  --gap: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.18, 1);
  --night-bg: #050506;
  --night-fg: #ececee;
  --day-bg: #ffffff;
  --day-fg: #141416;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--day-bg); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* The old NIGHT/DAY pill is gone — the site nav's light/dark toggle jumps
   between the two halves instead (see app.js). nav.css styles that pill. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- chapters ---------- */

/* --cols lives here (not on .gallery) so .intro can size itself to an exact
   column span. The intro is always 2 columns wide — sized off the reference
   the user marked up; 3 read as too heavy. */
.chapter {
  position: relative;
  --cols: 3;
  --intro-cols: 2;
}

@media (min-width: 768px)  { .chapter { --cols: 4; } }
@media (min-width: 1100px) { .chapter { --cols: 5; } }
@media (min-width: 1600px) { .chapter { --cols: 6; } }

.chapter.dark {
  background: var(--night-bg);
  color: var(--night-fg);
  /* the wall ends flush against the hard cut to daylight */
  padding-bottom: var(--gap);
}

.chapter.light {
  background: var(--day-bg);
  color: var(--day-fg);
}

/* ---------- masonry wall ----------
   app.js distributes .tile nodes into .col flex columns, always dropping
   the next tile into the currently-shortest column (heights known up front
   from data-ratio). --cols is the only breakpoint knob. */

.gallery {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--gap) var(--gap) 0;
}

.gallery .col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* reserves the top of the columns the intro covers; height set by app.js */
.intro-spacer { flex: none; }

/* ---------- tiles ---------- */

.tile {
  cursor: zoom-in;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
}

.tile.in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .tile {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

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

@media (hover: hover) {
  .tile:hover img { opacity: 0.9; }
  .tile img { transition: opacity 0.25s var(--ease); }
}

.tile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* ---------- section intros ----------
   maxvoltar-style: the text occupies the wall's top-left corner and the
   tiles come up beside it. It's absolutely positioned over the first
   --intro-cols columns (exact column span, so it snaps to the grid) and
   app.js pushes those columns down by its height. */

.intro {
  position: absolute;
  z-index: 1;
  top: var(--gap);
  left: var(--gap);
  width: calc(
    (100% - 2 * var(--gap) - (var(--cols) - 1) * var(--gap)) / var(--cols)
      * var(--intro-cols) + (var(--intro-cols) - 1) * var(--gap)
  );
  aspect-ratio: 1;          /* a square brick in the wall */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  text-wrap: pretty;
}

/* narrow screens: no room to sit beside tiles — back to a band above them */
@media (max-width: 767px) {
  .intro {
    position: static;
    width: auto;
    padding: 32px 24px;
  }
}

.intro h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.05;
}

.intro h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.1;
}

.intro p {
  margin: 0 0 10px;
  max-width: 480px;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  opacity: 0.85;
}

.intro .count {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.intro a {
  color: inherit;
  text-underline-offset: 3px;
}

.intro a:hover { opacity: 0.7; }

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

footer {
  background: var(--day-bg);
  color: var(--day-fg);
  text-align: center;
  padding: 56px 16px 64px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

footer p { margin: 0; opacity: 0.5; }

/* ---------- zoom lightbox ---------- */

.zoom {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: zoom-out;
  background: rgba(6, 6, 8, 0.94);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.zoom.lightbg { background: rgba(250, 250, 251, 0.96); }

.zoom.open { opacity: 1; }

.zoom figure {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vmin, 48px);
  padding-bottom: 72px;
}

/* tall screenshots: start at the top and let the overlay scroll */
.zoom.scrolly figure { justify-content: flex-start; }

.zoom img {
  max-width: 100%;
  max-height: calc(100vh - 2 * clamp(16px, 4vmin, 48px));
  width: auto;
  height: auto;
  border-radius: 8px;
  scale: 0.975;
  transition: scale 0.3s var(--ease);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

/* on the light overlay a heavy black halo is jarring — keep it airy */
.zoom.lightbg img {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.zoom.open img { scale: 1; }

.zoom.scrolly img {
  max-height: none;
  width: min(920px, 100%);
}

.zoom figcaption {
  position: fixed;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: #f2f2f4;
  background: rgba(24, 25, 30, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.zoom.lightbg figcaption {
  color: #17181c;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}