*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg: #FFFFFF;
      --text-primary: #1A1A1A;
      --text-secondary: #D1D1D1;
      --text-muted: #999999;
      --accent: #566b00;
      --sidebar-w: 300px;
      --font-main: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Inter", sans-serif;
    }

    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-main);
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
      font-size: 14px;
    }

    .layout-wrapper {
      display: flex;
      height: 100vh;
      width: 100vw;
    }

    /* ─── MAIN CONTENT ─── */
    .scroll-container {
      flex: 1;
      margin-left: var(--sidebar-w);
      height: 100vh;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    main {
      display: flex;
      justify-content: center;
      padding: 80px 40px 120px 40px;
    }

    /* The scroll area starts after the fixed sidebar, so centring inside it
       lands half a sidebar right of the true screen centre. Pad the right by
       the sidebar width to pull the column back to the viewport centre — only
       once there is room for the full 540px column plus gutters. */
    @media (min-width: 1220px) {
      main {
        padding-right: calc(40px + var(--sidebar-w));
      }
    }

    .photos-wrapper {
      max-width: 540px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .photos-header {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 0 4px;
    }

    .photos-header h1 {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .photos-header p {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-muted);
    }

    /* ─── PHOTO GRID ─── */
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* Was a flat 20px. Doubled to 40px on desktop, easing down to 24px on
         narrow screens so the gap keeps roughly the same share of the column
         width instead of crowding out the photos. */
      gap: clamp(24px, 18.4px + 1.5vw, 40px);
    }

    .photo-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-decoration: none;
      color: inherit;
    }

    .photo-item.landscape {
      grid-column: 1 / -1;
      order: 1;
    }

    .photo-item.portrait {
      order: 2;
    }

    .photo-item img {
      width: 100%;
      aspect-ratio: 3/2;
      object-fit: cover;
      background: #F0F0F0;
      transition: opacity 0.3s ease;
    }

    .photo-item.portrait img {
      aspect-ratio: 2/3;
    }

    .photo-item.landscape img {
      aspect-ratio: 3/2;
    }

    .photo-item:hover img {
      opacity: 0.85;
    }

    .photo-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-secondary);
      text-transform: lowercase;
    }