:root{
  /* caminho da sua imagem de fundo */
  --bg-img: url("Imagens/tatoo_background.jpg"); /* troque para o caminho do seu arquivo */
  --ink: #111;          /* texto escuro */
  --paper: #fff;        /* base */
  --brand: #f1ca7a;     /* amarelo das etiquetas */
  --frame: #f1ca7a;     /* cor da borda das molduras */
  --shadow: rgba(0,0,0,.35);
}

/* reset mínimo */
*{ box-sizing: border-box; }
html, body { height: 70%; }
body{
  margin: 10;
  background: #000;
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ====== CANVAS ====== */
.canvas{
  min-height: 90svh;
  /* imagem de background com overlay sutil */
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)), var(--bg-img) center/cover no-repeat;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
}

/* ====== GRID PRINCIPAL (8 colunas, 2 linhas) ====== */
.grid{
  width: min(1280px, 96vw);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 220px;              /* altura das faixas */
  gap: clamp(16px, 2vw, 28px);
}

/* ====== BLOCO BASE ====== */
.tile{
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
}

/* moldura transparente com borda */
.tile--frame{
  background: transparent;
  border: 4px solid var(--frame);
}

/* cartões amarelos */
.tile--fill{
  background: var(--brand);
}

/* overlay escuro com borda amarela */
.tile--overlay{
  background: rgba(0,0,0,.6);
  border: 3px solid var(--frame);
}

/* ====== TIPOGRAFIA ====== */
.t{
  margin: 0;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--ink);
}
.t--white{
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,.45);
}

/* “Logo” caligráfico simplificado (substitua por imagem se quiser) */
.tile--logo .logo{
  display: grid;
  place-items: center;
  gap: 6px;
}
.tile--logo .logo span{
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,.5);
}

/* ====== POSICIONAMENTO (fidedigno ao print) ====== */
/* linha 1–2: moldura logo (2 col x 2 rows) */
.tile--logo{ grid-column: 1 / span 2; grid-row: 1 / span 2; }

/* linha 1–2: “Um ano de tinta…” (2 col x 2 rows) */
.tile:nth-of-type(2){ grid-column: 3 / span 2; grid-row: 1 / span 2; }

/* linha 1–2: “Relatórios de tintas” (2 col x 2 rows, amarelo) */
.tile:nth-of-type(3){ grid-column: 5 / span 2; grid-row: 1 / span 2; }

/* linha 1–2: “Tudo a ver com sua história.” (2 col x 2 rows, moldura) */
.tile:nth-of-type(4){ grid-column: 7 / span 2; grid-row: 1 / span 2; }

/* linha 3–4 (segunda faixa visual): “Repertório Anual” (2 col x 2 rows, amarelo) */
.tile:nth-of-type(5){ grid-column: 3 / span 2; grid-row: 3 / span 2; }

/* “Cada projeto é um novo capítulo…” (2 col x 2 rows, overlay escuro com borda) */
.tile:nth-of-type(6){ grid-column: 5 / span 2; grid-row: 3 / span 2; }

/* “Companhia Cultural” (2 col x 2 rows, amarelo) */
.tile:nth-of-type(7){ grid-column: 7 / span 2; grid-row: 3 / span 2; }

/* ====== RESPONSIVO ====== */
@media (max-width: 1000px){
  .grid{ grid-auto-rows: 190px; }
}
@media (max-width: 820px){
  .grid{
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
  }
  .tile--logo{ grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .tile:nth-of-type(2){ grid-column: 3 / span 2; grid-row: 1 / span 2; }
  .tile:nth-of-type(3){ grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .tile:nth-of-type(4){ grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .tile:nth-of-type(5){ grid-column: 1 / span 2; grid-row: 5 / span 2; }
  .tile:nth-of-type(6){ grid-column: 3 / span 2; grid-row: 5 / span 2; }
  .tile:nth-of-type(7){ grid-column: 1 / span 2; grid-row: 7 / span 2; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .tile{ padding: 12px; }
}