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

    body {
      background: #f5efe0;
      background-image:
        radial-gradient(ellipse at 50% 0%, #ede0c4 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(160,120,40,0.04) 0px, rgba(160,120,40,0.04) 1px, transparent 1px, transparent 12px);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 1rem 3rem;
      font-family: 'Montserrat', sans-serif;
    }

    /* ── Title ── */
    .title-block {
      width: 100%;
      max-width: 760px;
      padding: 0.8rem 0 0.6rem;
      overflow: hidden;
    }
    .title-h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 10vw;
      color: #8b1a1a;
      text-transform: uppercase;
      white-space: nowrap;
      display: block;
      width: 100%;
      text-align: justify;
      text-align-last: justify;
      letter-spacing: 0.02em;
      line-height: 1;
      transform: scaleY(1.35);
      transform-origin: top left;
    }
    .subtitle {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: clamp(0.55rem, 1.2vw, 0.75rem);
      color: #a07030;
      letter-spacing: 0.6em;
      margin-top: 14px;
      opacity: 0.8;
      text-transform: uppercase;
      text-align: center;
    }

    /* ── Mosaic ── */
    .mosaic-wrap {
      width: 100%;
      max-width: 760px;
      position: relative;
    }

    .mosaic {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2px;
      background: #8b1a1a;
      padding: 2px;
    }

    .cell {
      aspect-ratio: 3 / 4;
      background: #e8dcc8;
      overflow: hidden;
      position: relative;
    }

    .cell.border {
      cursor: pointer;
    }
    .cell.border img,
    .center-overlay img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Center overlay ── */
    .center-overlay {
      position: absolute;
      overflow: hidden;
      background: #e8dcc8;
      cursor: pointer;
    }

    /* ── Placeholder ── */
    .placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8b1a1a;
      gap: 4px;
      padding: 8px;
      text-align: center;
    }
    .placeholder svg {
      opacity: 0.3;
      width: 40%;
      height: auto;
    }
    .placeholder span {
      font-size: 8px;
      letter-spacing: 0.08em;
      opacity: 0.4;
      font-weight: 200;
    }
    .center-overlay .placeholder svg { width: 18%; }
    .center-overlay .placeholder span {
      font-size: clamp(10px, 1.4vw, 13px);
      letter-spacing: 0.15em;
      opacity: 0.5;
      font-weight: 200;
      text-transform: uppercase;
      line-height: 1.6;
    }

    /* ── Footer ── */
    .footer {
      width: 100%;
      max-width: 760px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: #a07030;
      font-size: 11px;
      opacity: 0.7;
      letter-spacing: 0.4em;
      margin-top: 1rem;
      font-weight: 200;
      text-transform: uppercase;
    }
    .footer .orn { font-size: 14px; color: #8b1a1a; }