/* Shared by the homepage (index.html) and the admin Layout preview (layout-preview.html).
   Palette and card rules live here once; change them here, not in either page. */
:root{
  --void:#0A1622; --panel:#102030; --panel2:#16293A; --line:#23394B; --line2:#2E4A61;
  --ink:#E8F0F5; --dim:#90A9B9; --dim2:#647F92; --go:#4FD3BE;
}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px;padding-bottom:10px}
.sim{background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;
     text-decoration:none;display:flex;flex-direction:column}
.sim:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-1px)}
.sim:focus-visible{outline:2px solid var(--go);outline-offset:2px}
.shot{position:relative;aspect-ratio:4/3;background:#0D1C29;border-bottom:1px solid var(--line);
      display:flex;align-items:center;justify-content:center;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .ph{font:600 13px Archivo,sans-serif;color:var(--k);letter-spacing:.14em;text-transform:uppercase;
          text-align:center;padding:0 16px;opacity:.75}
.shot .ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--k) 22%, transparent), transparent 70%);}
.meat{padding:11px 13px 14px;border-left:3px solid var(--k);flex:1}
.sim h3{margin:0 0 5px;font-size:14.5px;font-weight:600;line-height:1.3}
.sim .hook{margin:0;font-family:Spectral,Georgia,serif;font-size:13.5px;line-height:1.46;color:var(--dim)}
.sim .wing{display:block;margin-top:9px;font-size:11.5px;color:var(--k)}
.soon{opacity:.42;pointer-events:none}
.soon .shot::after{content:attr(data-soon);position:absolute;top:8px;left:8px;background:var(--void);
  border:1px solid var(--line2);color:var(--dim);border-radius:999px;padding:2px 8px;font-size:11px}
.empty{color:var(--dim);font-family:Spectral,Georgia,serif;padding:26px 0}