/* Epiphany & Co — Minimal editorial template (black/white) */

:root{
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0,0,0,0.55);
  --hairline: rgba(0,0,0,0.12);
  --soft: rgba(0,0,0,0.04);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-serif, "Georgia", "Times New Roman", serif;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Layout */
.site{
  min-height: 100%;
  background: var(--bg);
}

.header{
  display: flex;
  justify-content: center;
  padding: 14px 16px 6px;
}

/* White-filled logo rectangle (black border/text) */
.logo{
  display: inline-block;
  text-decoration: none;
  color: var(--fg);
  background: #fff;                 /* key */
  border: 3px solid #000;
  padding: 10px 16px;
  text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  font-size: 14px;
}

/* Nav */
.nav{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--soft);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.nav-left{
  display: flex;
  gap: 18px;
}

.nav-link{
  text-decoration: none;
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 650;
  font-size: 12px;
  padding: 8px 2px;
  opacity: 0.72;            /* subtle */
}

.nav-link:hover{ opacity: 1; }

/* No “white highlight” — only opacity changes */
.nav-link.is-active{
  opacity: 1;
}

/* Social icons (SVG) */
.nav-right{
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-link{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
  background: #fff;
}

.icon-link svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.icon-link:hover{
  border-color: rgba(0,0,0,0.30);
}

/* Main content */
.main{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}

.page{ display: none; }
.page.is-active{ display: block; }

/* Hero typography (tight luxury spacing) */
.hero{
  margin: 0 0 18px;
}

.hero-title{
  margin: 0 0 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 750;
  line-height: 1.08;
  font-size: 1.6rem; /* change here anytime */
}

.hero-slogan{
  margin: 0;
  font-style: italic;
  letter-spacing: 0.10em;
  text-transform: lowercase;
  color: rgba(0,0,0,0.70);
  font-size: 0.95rem;
}

/* Hero media placeholder */
.hero-media{
  margin-top: 20px;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.00)),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0 10px, rgba(0,0,0,0.00) 10px 20px);
}

/* 3-tile grid: aligned squares */
.grid-3{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 760px){
  .grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Tile */
.tile{
  position: relative;
  display: block;
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: #fff;
  overflow: hidden;
}

.tile-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.00)),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0 12px, rgba(0,0,0,0.00) 12px 24px);
  transform: scale(1);
  transition: transform 260ms ease;
}

/* Slightly different textures per tile (still consistent) */
.tile-media--a{ background-position: 0 0, 0 0; }
.tile-media--b{ background-position: 20px 10px, 10px 20px; }
.tile-media--c{ background-position: 40px 15px, 25px 30px; }

/* Centered hover quote overlay */
.tile-quote{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background: rgba(255,255,255,0.90);
  opacity: 0;
  transition: opacity 220ms ease;
}

.tile-quote span{
  font-style: italic;
  color: rgba(0,0,0,0.85);
  letter-spacing: 0.01em;
}

/* Hover */
.tile:hover .tile-media{ transform: scale(1.03); }
.tile:hover .tile-quote{ opacity: 1; }

/* Shop */
.shop-panel{
  margin-top: 22px;
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 28px 18px;
  text-align: center;
}

.shop-panel p{
  margin: 0;
  font-style: italic;
  color: rgba(0,0,0,0.75);
  letter-spacing: 0.02em;
}

/* Footer minimal */
.footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}

.footer-text{
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.35;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
}