/* ============================================================
   EM Photography & Film — Splash / Cover Page
   Palette: white bg · cream #FFF5F2 · beige #F4DFD0 · taupe #DAD0C2 · sand #CDBBA7
   Text/dark: ink #1a1a1a
   ============================================================ */

:root {
  --white:  #ffffff;
  --cream:  #FFF5F2;
  --beige:  #F4DFD0;
  --taupe:  #DAD0C2;
  --tan:    #CDBBA7;
  --brown:  #1a1a1a;

  --font-display: "Google Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--brown);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ---------- splash layout ---------- */

.splash-body { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--white);
}

/* tile grid — desktop 5×3, tablet 4×3, mobile 3×4 */
.tile-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
}

.tile {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.tile:not(.tile-brand) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile.tile-blank {
  background: var(--white);
}

/* ---------- center brand tile ---------- */

.tile-brand {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--brown);
  z-index: 2;
  /* Desktop default: single center cell */
  grid-column: 3;
  grid-row: 2;
}
@media (max-width: 900px) {
  .tile-brand {
    grid-column: 2 / span 2;
    grid-row: 2;
  }
}
@media (max-width: 600px) {
  .tile-brand {
    grid-column: 2;
    grid-row: 3;
    padding: 8px;
  }
}

.brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
}

.brand-logo {
  width: 70%;
  max-width: 200px;
  min-width: 120px;
  height: auto;
  margin-bottom: 10px;
}

.brand-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(10px, 0.95vw, 12px);
  line-height: 1.35;
  margin: 0 0 14px;
  max-width: 28ch;
  color: var(--brown);
  opacity: 0.78;
}

.brand-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  padding: 9px 22px;
  border: 1px solid var(--brown);
  transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease;
}
.brand-cta:hover {
  background: var(--brown);
  color: var(--cream);
  letter-spacing: 0.34em;
}

.brand-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.brand-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--brown);
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.brand-social a:hover { opacity: 1; transform: translateY(-2px); }
.brand-social svg { width: 15px; height: 15px; }

/* Tablet — slightly larger because the cell is wider */
@media (max-width: 900px) {
  .brand-logo { max-width: 220px; }
  .brand-tagline { font-size: 12px; }
}

/* Mobile portrait — single dense cell. Tagline + social hidden, logo + CTA only. */
@media (max-width: 600px) {
  .brand-logo { width: auto; max-width: 90px; min-width: 0; margin-bottom: 8px; }
  .brand-tagline { display: none; }
  .brand-cta { font-size: 8px; padding: 6px 12px; letter-spacing: 0.24em; }
  .brand-social { display: none; }
}

/* Phone landscape — short viewport. Default desktop layout would squeeze the brand
   into a 143px-tall cell. Give it 3 cells of horizontal room and lay the content
   out side-by-side: logo on the left, tagline + CTA stacked on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .tile-brand {
    grid-column: 2 / span 3;
    grid-row: 2;
    padding: 8px 22px;
  }
  .brand-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 6px;
    align-items: center;
    width: max-content;
    max-width: 100%;
    text-align: left;
  }
  .brand-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    max-width: 110px;
    min-width: 0;
    margin: 0;
    align-self: center;
  }
  .brand-tagline {
    grid-column: 2;
    grid-row: 1;
    font-size: 11px;
    line-height: 1.3;
    margin: 0;
    max-width: 30ch;
  }
  .brand-cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: 9px;
    padding: 6px 16px;
    letter-spacing: 0.26em;
  }
  .brand-social { display: none; } /* not enough vertical room */
}