/* Niko's Tile — Social Tiles · ported from design "Nikos Social Tiles.dc.html" */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E7E2D8; color: #1C1814; font-family: 'Instrument Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #1C1814; text-decoration: none; }
a:hover { color: #A6552F; }

/* ---- header ---- */
.site-head { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 40px; background: rgba(18,15,12,0.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #F4F1EB; }
.head-brand { display: flex; align-items: center; gap: 16px; }
.head-mark { width: 40px; height: 40px; display: block; flex: none; }
.head-name { font-size: 18px; font-weight: 600; letter-spacing: 0.22em; }
.head-sub { font-size: 12.5px; color: rgba(244,241,235,0.55); letter-spacing: 0.04em; margin-top: 3px; }
.head-dl { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #F7F3EC; background: #A6552F; border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: background .2s; }
.head-dl:hover { background: #8F4523; }
.head-dl:disabled { opacity: 0.6; cursor: default; }

/* ---- gallery grid ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 1240px; margin: 0 auto; padding: 48px 40px 64px; }
.cell { display: flex; flex-direction: column; gap: 16px; }
.cap { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8A8071; }

/* the responsive square that holds a 1080×1080 tile */
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; box-shadow: 0 22px 60px rgba(28,24,20,0.18); background: #14110D; }
.tile { position: absolute; top: 0; left: 0; width: 1080px; height: 1080px; overflow: hidden; transform-origin: top left; transform: scale(var(--s, 0.35)); }

.dl { align-self: flex-start; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #1C1814; background: transparent; border: 1px solid rgba(28,24,20,0.3); border-radius: 999px; padding: 10px 22px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.dl:hover { background: #14110D; border-color: #14110D; color: #F4F1EB; }

/* ---- footer ---- */
.site-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 40px 40px; font-size: 12.5px; color: #6E655A; border-top: 1px solid rgba(28,24,20,0.12); max-width: 1240px; margin: 0 auto; }
.foot-dim { color: #948a7d; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; gap: 40px; max-width: 620px; padding: 36px 22px 52px; }
  .site-head { padding: 14px 22px; }
  .head-sub { display: none; }
}
@media (max-width: 480px) {
  .site-head { padding: 12px 16px; }
  .grid { padding: 28px 16px 44px; }
}

/* ---- raw export mode (Playwright screenshots tiles at native 1080²) ---- */
body.raw { background: #ffffff; }
body.raw .site-head, body.raw .site-foot, body.raw .cap, body.raw .dl { display: none; }
body.raw .grid { display: block; max-width: none; margin: 0; padding: 0; }
body.raw .cell { gap: 0; }
body.raw .stage { width: 1080px; height: 1080px; border-radius: 0; box-shadow: none; }
body.raw .tile { transform: none; }