:root{ --peach:#FAC97F; --card:#fff; --ink:#2b2b2b; --pink:#FF3D8B; --line:#F0A85E; }
*{box-sizing:border-box}
body{margin:0;background:var(--peach);color:var(--ink);
     font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--pink);text-decoration:none}

.head{text-align:center;padding:34px 20px 18px}
/* Andronic mark — the real logo, cropped to a clean circle */
.head .logo{width:140px;height:140px;border-radius:50%;object-fit:cover;display:block;
            margin:6px auto 22px}
.head .desc{letter-spacing:.06em;font-size:13px;line-height:1.7}
.nav{display:flex;gap:40px;justify-content:center;padding:14px 0 24px;
     font-size:22px;letter-spacing:.02em;flex-wrap:wrap}
.nav a{color:var(--pink);cursor:pointer;font-weight:600}
.nav a.on{border-bottom:3px solid var(--pink);padding-bottom:4px}
.nav a .n{font-size:14px;opacity:.5;margin-left:7px;vertical-align:baseline;font-weight:600}
.burger{display:none}

/* square colour grid */
.grid{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line)}
.tile{position:relative;aspect-ratio:1/1;border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);overflow:hidden;color:#fff;display:block;
      background-size:cover;background-position:center;
      opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.tile.in{opacity:1;transform:none}
.tile::after{content:"";position:absolute;inset:0;
             background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55))}
.tile .sub{position:absolute;top:8px;left:10px;font-size:9px;letter-spacing:.09em;z-index:2;
           text-shadow:0 1px 4px rgba(0,0,0,.5)}
.tile .t{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
         font-weight:700;font-size:12px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tile:hover{filter:brightness(1.06)}

/* placement card: track name up top, playlist bar across the bottom (like the social card) */
.tile .tt{position:absolute;top:8px;left:10px;right:10px;z-index:2;font-size:10px;font-weight:600;
          line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.tile .bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 10px 9px;
           background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.82) 55%);
           display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tile .bar .info{min-width:0;flex:1}
.tile .bar .pl{font-weight:800;font-size:13px;line-height:1.05;text-transform:uppercase;
               letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tile .bar .cta{color:#1ED760;font-weight:700;font-size:8px;letter-spacing:.09em;
                text-transform:uppercase;margin-top:3px}
.tile .bar .thumb{width:34px;height:34px;border-radius:4px;flex-shrink:0;object-fit:cover;
                  box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* blog card shows clean artwork — no dark gradient wash */
.tile.blog::after{background:none}
.tile .bar .by2{font-size:9px;opacity:.85;margin-top:2px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
/* soundtrack card: taller bottom bar — big track title, then the film name under it */
.tile .bar.filmbar{padding:52px 11px 14px}
.tile .bar .pl.big{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .filmbar .rfilm{font-size:9.5px;line-height:1.3;margin-top:4px;color:#1ED760;font-weight:700;
                      letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.85);
                      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .sub.dark{color:#1b1b1b;text-shadow:none;background:rgba(255,255,255,.8);
                padding:1px 5px;border-radius:3px}
.tile .blogover{position:absolute;left:0;right:0;bottom:0;top:50%;z-index:2;
                background:rgba(255,255,255,.88);color:#1b1b1b;padding:12px 12px;overflow:hidden}
.tile .blogover .btitle{font-weight:800;font-size:13px;line-height:1.15;margin-bottom:5px}
.tile .blogover .bex{font-size:10px;line-height:1.4;color:#3a3a3a}

.end{text-align:center;padding:26px;color:var(--pink);font-size:12px;letter-spacing:.1em}
footer{text-align:center;padding:26px;color:#7a5a2a;font-size:12px}

@media (max-width:1400px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}.nav.open{display:flex;flex-direction:column;gap:14px}
  .burger{display:block;text-align:center;font-size:26px;padding:12px 0;cursor:pointer}
}

/* record pop-up */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
       background:rgba(0,0,0,.72);padding:20px}
.modal.open{display:flex}
.modal .box{background:#fff;color:var(--ink);border-radius:14px;max-width:620px;width:100%;
            max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal .body h2{font-size:24px}
/* blog reads like a big sheet of A4 paper: wide, tall, page-style margins */
.modal.paper .box{max-width:1500px;width:94vw;max-height:96vh;border-radius:4px}
/* small picture, big readable article — the text is the point, not the image */
.modal.paper .cover{aspect-ratio:auto;height:240px}
.modal.paper .body{padding:48px 40px 72px}
.modal.paper .body h2{font-size:44px;max-width:820px;margin-left:auto;margin-right:auto}
.modal.paper .by{max-width:820px;margin:0 auto}
/* article text in a comfortable centred reading column, generous size */
.modal.paper .article-body{max-width:820px;margin:22px auto 0}
.modal.paper .article-body p{font-size:19px;line-height:1.85;margin:0 0 22px}
.modal.paper .src{max-width:820px;margin:8px auto 0;font-size:14px;color:var(--muted)}
.modal .share{margin:24px auto 2px;display:block;background:none;border:1.5px solid var(--pink);
              color:var(--pink);border-radius:999px;padding:10px 22px;font-size:13px;font-weight:700;
              cursor:pointer}
.modal .share:hover{background:var(--pink);color:#fff}
.modal .article-body{display:none;text-align:left;margin-top:16px}
.modal .article-body p{margin:0 0 15px;font-size:15px;line-height:1.65}
.modal.paper .article-body p{font-size:16px;line-height:1.75;margin:0 0 18px}
.modal .cover{width:100%;aspect-ratio:1/1;background:#eee center/cover no-repeat}
.modal .body{padding:20px 22px 22px;text-align:center}
.modal .body h2{margin:0 0 2px;font-size:20px}
.modal .body .by{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal .stores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.modal .stores a{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;
                 font-weight:600;color:var(--ink);white-space:nowrap}
.modal .stores a:hover{background:var(--peach)}
.modal .license{display:block;margin:18px auto 0;background:var(--ink);color:#fff;border-radius:999px;
                padding:11px 20px;font-weight:700;font-size:14px;max-width:260px}
.modal .close{position:absolute;top:16px;right:20px;color:#fff;font-size:30px;cursor:pointer;line-height:1}

/* article page */
.article{max-width:680px;margin:0 auto;padding:40px 22px 60px}
.article .tag{color:var(--pink);font-size:12px;letter-spacing:.1em}
.article h1{font-size:30px;line-height:1.2;margin:8px 0 6px}
.article .date{color:#7a5a2a;font-size:12px;margin-bottom:24px}
.article p{margin:0 0 18px;font-size:16px;line-height:1.7}
.back{display:inline-block;margin:24px 22px}