@charset "UTF-8";
/* CSS Document */
/* ===== Base ===== */
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#fff;
  color:#666;
}

a{ color:#666; text-decoration:none; }
a:hover{ color:#888; }

/* Focus styling (prevents blue outlines while keeping keyboard accessibility) */
a:focus { outline:none; }
a:focus-visible { outline: 2px solid #bbb; outline-offset: 2px; }

header{
  background:#fff;
  padding:15px 30px;
  position:sticky;
  top:0;
  border-bottom:1px solid #eee;
  z-index:1000;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.logo a{
  font-size:22px;
  font-weight:400; /* regular */
  color:#666;
}

nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

nav a{
  font-size:16px;
}

/* ===== Gallery dropdown ===== */
.dropdown{
  position:relative;
  display:inline-block;
}

.dropdown > a{
  padding:6px 0;
  display:inline-block;
}

.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  min-width:260px;
  padding:10px 0;
  z-index:2000;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}

.dropdown-menu a{
  display:block;
  padding:10px 16px;
  white-space:nowrap;
}

.dropdown-menu a:hover{
  background:#f7f7f7;
}

/* ===== Page layout ===== */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:32px 20px 60px;
}

h1{
  font-size:28px;
  font-weight:400;
  margin:0 0 16px;
  color:#666;
}

p{
  margin:0 0 16px;
  line-height:1.6;
}

/* ===== Category grid (Gallery landing) ===== */
.category-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.category-card{
  border:1px solid #eee;
  border-radius:10px;
  padding:18px;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
  background:#fff;
}

.category-card:hover{
  box-shadow:0 12px 26px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}

.category-card .title{
  font-size:16px;
  font-weight:400;
  color:#666;
}

/* ===== Artwork grid ===== */
.art-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
	gap:12px;
  margin-top:18px;
}


/* Square thumbnail tiles */
.art-grid a{
  display:block;
  border:1px solid #eee;
  border-radius:0;        /* square corners */
  overflow:hidden;
  background:#fff;

  aspect-ratio: 1 / 1;    /* forces a square tile */
}

/* Crop image to fill the square */
.art-grid img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;   
	
	/* fills square without distortion */
}

/* Hover behavior for thumbnails */
.art-grid a{
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.art-grid img{
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.art-grid a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.art-grid a:hover img{
  opacity: 0.92;
  transform: scale(1.01);
}



/* ===== Footer ===== */
footer{
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#999;
  border-top:1px solid #eee;
  margin-top:40px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .category-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .art-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  header{ padding:12px 16px; }
  .navbar{ align-items:flex-start; }
  nav{ gap:12px; }

  /* PHONE: 3-up thumbnail grid */
  .art-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
}

/* ===== Home hero layout ===== */
.hero{
  text-align:center;
  padding:30px 20px 0;   /* less top + remove bottom push */
}

.hero img{
  display:block;
  margin:0 auto 0px;   /* was 18px */
  max-width:820px;
  width:90%;
  height:auto;
}


/* Signature block under image */


/* ===== Home page signature block ===== */
/* ===== Home page signature block (single source of truth) ===== */
.home-signature{
  text-align:center;
  margin: -8 0 30px;
  color:#666;
  width:100%;
}

.home-name{
  font-family: Arial, Helvetica, sans-serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:0.10em;
}

.home-rule{
  display:block;
  width:420px;
  max-width:80%;
  height:1px;
  background:#ccc;
  margin:14px auto 12px;
}

.home-subtitle{
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#888;
}


/* Main name */
.home-name{
  font-family: Arial, Helvetica, sans-serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:0.10em; /* slightly wider */
}

/* Thin line */
.home-rule{
  width:420px;
  max-width:80%;
  height:1px;
  background:#ccc;
  margin:14px auto 12px;
}

/* Subtitle */
.home-subtitle{
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#888;
}

/* ===== MOBILE FIX FOR HOME PAGE ===== */
@media (max-width: 640px){

  .hero{
    padding: 16px 12px 6px;
  }

  .hero img{
    display:block;
    width:100%;
    max-width:420px;     /* caps size so it never overwhelms the phone */
    margin:0 auto 6px;
  }
	.hero img{
  width: calc(100% - 28px);
  max-width: 820px;
  margin: 0 auto 6px;
}
	
	/* ===== HOME: contain hero image on phone landscape ===== */
@media (max-width: 900px) and (orientation: landscape){

  .hero{
    padding-top: 10px;
    padding-bottom: 0;
  }

  .hero img{
    /* keep it from running below the screen */
    max-height: 60vh;   /* try 55vh if you want it smaller */
    width: auto;
    max-width: 95vw;
    height: auto;
  }
}


  }

}


  .home-signature{
    width:100%;
    margin: 22 auto 22px;
    padding: 0 12px;     /* keeps text safely inside edges */
    text-align:center;
  }
	@media (max-width: 640px){

  .home-signature{
    width:100%;
    text-align:center;

    /* This cancels out the side padding of the hero container */
    margin-left:auto;
    margin-right:auto;
  }

.home-name,
.home-subtitle,
.home-rule{
  margin-left:auto;
  margin-right:auto;
}



  .home-name{
    font-size: 30px;
    letter-spacing: 0.07em;
  }

  .home-rule{
    width: 72%;
    margin: 8px auto;
  }

  .home-subtitle{
    font-size: 13px;
    letter-spacing: 0.10em;

	}
/* ===== MOBILE FOOTER TO BOTTOM ===== */
@media (max-width: 640px){

  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }

  main{
    flex:1;   /* pushes footer down */
  }

  footer{
    margin-top:auto;
  }
/* ===== HOME: contain hero image on phone landscape ===== */
@media (max-width: 900px) and (orientation: landscape){

  .hero{
    padding-top: 10px;
    padding-bottom: 0;
  }

  .hero img{
    /* keep it from running below the screen */
    max-height: 60vh;   /* try 55vh if you want it smaller */
    width: auto;
    max-width: 95vw;
    height: auto;
  }
}

		






}