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

    body {
      font-family: system-ui, sans-serif;
      background: #f5f4f0;
      color: #1a1a1a;
      padding: 2rem;
      max-width: 960px;
      margin: 0 auto;
    }

    header {
      padding-bottom: 1.5rem;
      border-bottom: 1px solid #ddd;
      margin-bottom: 2rem;
    }

    header h1 { font-size: 1.5rem; font-weight: 500; }
    header p { font-size: 0.875rem; color: #888; margin-top: 4px; }

    .shelf {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 1.5rem 1.25rem;
    }

    .zine { display: flex; flex-direction: column; gap: 8px; }

    .zine a { text-decoration: none; display: block; }

    .cover-wrap {
      width: 100%;
      aspect-ratio: 3 / 4;
      
      overflow: hidden;
      border: 1px solid #ddd;
      background: #eee;
      transition: transform 0.15s ease;
    }

    .zine a:hover .cover-wrap {
      transform: translateY(-4px);
      border-color: #bbb;
    }

    .cover-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .zine-title { font-size: 0.8125rem; font-weight: 500; color: #1a1a1a; }
    .zine-sub   { font-size: 0.75rem; color: #888; }