:root {
    --bg: #f7f7f5;
    --ink: rgba(10, 10, 10, 0.9);
    --tile: rgba(10, 10, 10, 0.06);
    --tile-2: rgba(10, 10, 10, 0.11);
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
    --radius: 18px;
    --gap: 14px;
    --max: 1160px;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0c0d0e;
      --ink: rgba(250, 250, 250, 0.92);
      --tile: rgba(255, 255, 255, 0.06);
      --tile-2: rgba(255, 255, 255, 0.12);
      --shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
    }
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  
  body {
    margin: 0;
    background: radial-gradient(1200px 700px at 50% -10%, rgba(127, 127, 127, 0.13), transparent 60%),
      radial-gradient(900px 500px at 10% 10%, rgba(127, 127, 127, 0.08), transparent 55%),
      var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    cursor: url("./cursor-camera.svg") 12 12, crosshair;
  }
  
  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 10;
  }
  
  body::before {
    opacity: 0.06;
    mix-blend-mode: overlay;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 4px),
      radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent 70%);
    filter: contrast(135%) saturate(108%);
    transform: translate3d(0, 0, 0);
  }
  
  body::after {
    opacity: 0.18;
    background:
      radial-gradient(80% 60% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.18) 100%),
      conic-gradient(
        from 0deg at 40% 35%,
        rgba(255, 170, 120, 0.10),
        rgba(170, 200, 255, 0.08),
        rgba(255, 240, 170, 0.08),
        rgba(255, 170, 120, 0.10)
      );
    mix-blend-mode: soft-light;
    filter: blur(12px) saturate(108%);
    transform: translate3d(0, 0, 0);
  }
  
  .bird {
    position: fixed;
    top: 12%;
    left: -10%;
    width: 52px;
    height: 32px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    animation:
      bird-flight 10s cubic-bezier(0.42, 0, 0.15, 1) infinite,
      bird-wobble 2400ms ease-in-out infinite alternate;
  }
  
  .bird__body {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
    background:
      radial-gradient(120% 100% at 10% 10%, rgba(255, 255, 255, 0.9), transparent 70%),
      linear-gradient(145deg, #fdfaf4, #f0e6d5);
    border-radius: 50px 10px 40px 10px;
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  
  .bird__body::before {
    content: "";
    position: absolute;
    right: -6px;
    top: 14px;
    border-width: 4px 0 4px 7px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(210, 160, 90, 0.9);
  }
  
  .bird__wing {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 32px;
    height: 28px;
    border-radius: 32px 32px 4px 32px;
    background: linear-gradient(160deg, #f8efe0, #e4d4bf);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transform-origin: 12px 20px;
    animation: bird-flap 900ms ease-in-out infinite alternate;
  }
  
  @keyframes bird-flight {
    0% {
      opacity: 0;
      transform: translate3d(0, 8px, 0) scale(0.96);
    }
    5% {
      opacity: 1;
    }
    35% {
      transform: translate3d(120vw, -26px, 0) scale(1);
      opacity: 1;
    }
    40% {
      opacity: 0;
      transform: translate3d(140vw, -40px, 0) scale(1.02);
    }
    60%,
    100% {
      opacity: 0;
      transform: translate3d(140vw, -40px, 0) scale(1.02);
    }
  }
  
  @keyframes bird-wobble {
    from {
      transform: translate3d(0, -3px, 0) rotate(-4deg);
    }
    to {
      transform: translate3d(0, 3px, 0) rotate(3deg);
    }
  }
  
  @keyframes bird-flap {
    0% {
      transform: rotate(-16deg);
    }
    100% {
      transform: rotate(20deg);
    }
  }
  
  .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(18px, 3vw, 32px);
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--gap) * 1.4);
    align-items: start;
  }
  
  @media (min-width: 740px) {
    .grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
    }
  }
  
  .tile {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: visible;
    padding: 8px 9px 16px;
    background:
      radial-gradient(140% 120% at 10% 0%, rgba(255, 255, 255, 0.9), rgba(245, 241, 233, 0.94)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(230, 222, 206, 0.8));
    outline: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.26),
      0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transform: translateZ(0);
    aspect-ratio: 4 / 5;
  }
  
  .tile {
    animation: riseIn 720ms cubic-bezier(0.18, 0.8, 0.2, 1) both;
  }
  .tile:nth-child(3n) {
    animation-delay: 60ms;
  }
  .tile:nth-child(4n) {
    animation-delay: 120ms;
  }
  .tile:nth-child(5n) {
    animation-delay: 180ms;
  }
  
  @keyframes riseIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 12px, 0) scale(0.985);
      filter: blur(3px);
    }
    60% {
      opacity: 1;
      transform: translate3d(0, -2px, 0) scale(1.01);
      filter: blur(0.6px);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }
  
  .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background:
      radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.26), transparent 55%),
      radial-gradient(120% 100% at 90% 80%, rgba(255, 255, 255, 0.10), transparent 60%);
    mix-blend-mode: overlay;
  }
  
  .tile::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 18%;
    width: 64%;
    height: 22px;
    border-radius: 3px;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7),
        rgba(245, 236, 210, 0.95),
        rgba(230, 216, 187, 0.95)
      );
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(210, 190, 150, 0.8);
    opacity: 0.95;
    transform: rotate(-2.2deg);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  
  .tile:nth-child(2n)::before {
    left: 14%;
    width: 70%;
    transform: rotate(1.6deg);
  }
  
  .tile:nth-child(3n)::before {
    top: -13px;
    transform: rotate(-0.6deg);
  }
  
  .tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: calc(var(--radius) * 0.7);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.95),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    filter: saturate(1.02) contrast(1.01);
    transform: scale(1.002);
  }
  
  @media (hover: hover) {
    .tile {
      transition:
        transform 220ms ease,
        outline-color 220ms ease,
        box-shadow 220ms ease,
        filter 220ms ease;
    }
  
    .tile:hover {
      transform: translate3d(0, -12px, 0) rotate(-1.5deg) scale(1.02);
      outline-color: var(--tile-2);
      box-shadow:
        0 24px 38px rgba(0, 0, 0, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    }
  }
  
  .tile:focus-visible {
    outline: 2px solid var(--tile-2);
    outline-offset: 3px;
  }
  
  @media (min-width: 740px) {
    .tile:nth-child(1) {
      grid-column: span 3;
      grid-row: span 2;
      aspect-ratio: 16 / 10;
    }
    .tile:nth-child(4),
    .tile:nth-child(9),
    .tile:nth-child(14),
    .tile:nth-child(19) {
      grid-column: span 2;
      aspect-ratio: 16 / 10;
    }
    .tile:nth-child(6),
    .tile:nth-child(11),
    .tile:nth-child(16) {
      grid-column: span 2;
      grid-row: span 2;
      aspect-ratio: 4 / 5;
    }
  }
  
  .lightboxes {
    pointer-events: none;
  }
  
  .lightbox {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: clamp(14px, 3vw, 34px);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  
  .lightbox:target {
    display: grid;
    animation: lbFade 140ms ease-out;
  }
  
  @keyframes lbFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .lb__img {
    max-width: min(1100px, 100%);
    max-height: min(86vh, 100%);
    width: auto;
    height: auto;
    border-radius: clamp(14px, 2vw, 22px);
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, 0.03);
  }
  
  .lightbox:target .lb__img {
    animation: lbIn 220ms ease-out both, kenburns 22s ease-in-out 260ms infinite alternate;
  }
  
  @keyframes lbIn {
    from {
      transform: translate3d(0, 10px, 0) scale(0.985);
      opacity: 0;
    }
    to {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 1;
    }
  }
  
  @keyframes kenburns {
    from {
      transform: translate3d(-0.6%, -0.35%, 0) scale(1.01);
    }
    to {
      transform: translate3d(0.6%, 0.35%, 0) scale(1.06);
    }
  }
  
  .lb__close {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
  }
  
  .lb__close::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    outline: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  }
  
  .lb__close::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background:
      linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0.7) 54%, transparent 54%),
      linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0.7) 54%, transparent 54%);
    opacity: 0.85;
  }
  
  @media (hover: hover) {
    .lb__close::before {
      transition: transform 180ms ease, background 180ms ease;
    }
    .lb__close:hover::before {
      transform: scale(1.04);
      background: rgba(255, 255, 255, 0.11);
    }
  }