:root{
    --nav-bg:#2a2f3d;
    --card-border:#d3d6de;
    --card-radius:12px;
    --dark-gray:#2a3040;

    /* 7-color palette (no pink) */
    --c1:#9bb8ff; /* indigo */
    --c2:#64b5ff; /* sky */
    --c3:#63e6be; /* mint */
    --c4:#ffe66d; /* yellow */
    --c5:#f6bd60; /* amber */
    --c6:#f8961e; /* orange */
    --c7:#f94144; /* red */

    /* band thickness */
    --band: 28px;
  }

  body{font-family:monospace;background:#fff;color:#1a1a1a;margin:0;}
  header{background:var(--nav-bg);color:#e5e8f0;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;}
  header h1{font-size:20px;letter-spacing:1px}
  header nav a{color:#e5e8f0;margin-left:24px;text-decoration:none}
  header nav a:hover{text-decoration:underline}

  main{margin:40px auto;max-width:1100px}
  h2{text-align:center;margin-bottom:20px;color:#111}

  table{border-collapse:separate;border-spacing:18px;margin:auto}
  td{
    width:320px;height:150px;background:var(--dark-gray);
    border:1px solid var(--card-border);border-radius:var(--card-radius);
    overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.15)
  }

  .card-top{
    height:64px;
    /* Gradients are hard-step bands (no interleaving); image-rendering mostly affects images,
       but we keep it for the retro vibe */
    image-rendering: pixelated;
    background-size: 100% 100%;
    background-repeat: repeat;
  }

  /* helper custom properties for repeated 7-band steps */
  .bands-225{
    background:
      repeating-linear-gradient(225deg,
        var(--c1) 0                calc(var(--band)*1),
        var(--c2) calc(var(--band)*1) calc(var(--band)*2),
        var(--c3) calc(var(--band)*2) calc(var(--band)*3),
        var(--c4) calc(var(--band)*3) calc(var(--band)*4),
        var(--c5) calc(var(--band)*4) calc(var(--band)*5),
        var(--c6) calc(var(--band)*5) calc(var(--band)*6),
        var(--c7) calc(var(--band)*6) calc(var(--band)*7)
      );
  }
  .bands-135{
    background:
      repeating-linear-gradient(135deg,
        var(--c1) 0                calc(var(--band)*1),
        var(--c2) calc(var(--band)*1) calc(var(--band)*2),
        var(--c3) calc(var(--band)*2) calc(var(--band)*3),
        var(--c4) calc(var(--band)*3) calc(var(--band)*4),
        var(--c5) calc(var(--band)*4) calc(var(--band)*5),
        var(--c6) calc(var(--band)*5) calc(var(--band)*6),
        var(--c7) calc(var(--band)*6) calc(var(--band)*7)
      );
  }

  /* Left + middle columns ↘ (225°) */
  .c1,.c2,.c4,.c5,.c7,.c8 { composes: bands-225; } /* note: composes is conceptual; apply class below */
  .c1,.c2,.c4,.c5,.c7,.c8 { background:
      repeating-linear-gradient(225deg,
        var(--c1) 0                calc(var(--band)*1),
        var(--c2) calc(var(--band)*1) calc(var(--band)*2),
        var(--c3) calc(var(--band)*2) calc(var(--band)*3),
        var(--c4) calc(var(--band)*3) calc(var(--band)*4),
        var(--c5) calc(var(--band)*4) calc(var(--band)*5),
        var(--c6) calc(var(--band)*5) calc(var(--band)*6),
        var(--c7) calc(var(--band)*6) calc(var(--band)*7)
      );
  }

  /* Right column ↙ (135°) */
  .c3,.c6,.c9 { background:
      repeating-linear-gradient(135deg,
        var(--c1) 0                calc(var(--band)*1),
        var(--c2) calc(var(--band)*1) calc(var(--band)*2),
        var(--c3) calc(var(--band)*2) calc(var(--band)*3),
        var(--c4) calc(var(--band)*3) calc(var(--band)*4),
        var(--c5) calc(var(--band)*4) calc(var(--band)*5),
        var(--c6) calc(var(--band)*5) calc(var(--band)*6),
        var(--c7) calc(var(--band)*6) calc(var(--band)*7)
      );
  }

  .card-mid{
    height:60px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--dark-gray);
  }
  .card-mid a{color:#8ec5ff;text-decoration:none}
  .card-mid a:hover{text-decoration:underline}

  .card-bot{
    height:26px;border-top:1px solid var(--card-border);padding:0 12px;
    display:flex;align-items:center;justify-content:flex-end;color:#c0c6d4;font-size:14px;background:var(--dark-gray);
  }

  footer{text-align:center;color:#444;font-size:14px;margin:40px 0 20px}
  footer a{color:#0055cc;text-decoration:none}
  footer a:hover{text-decoration:underline}

  /* CHANGE: bump card height for desc */
  td{
  width:320px; height:190px;           /* was 150px */
  background:var(--dark-gray);
  border:1px solid var(--card-border); border-radius:var(--card-radius);
  overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.15);
  }

  /* NEW: description area (2-line clamp) */
  .card-desc{
  padding:6px 12px 0 12px;
  color:#cbd3e6; font-size:14px; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  background:var(--dark-gray);
  }