/* ---------------------------------------------
   Tokens
--------------------------------------------- */
:root{
  --paper: #ECEAE1;
  --ink: #17170F;
  --stone: #6F6C60;
  --line: #D6D2C3;
  --teal: #1F4B4A;
  --rust: #B65B3B;

  --serif: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: clamp(14px, 2vw, 22px);
  --edge: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }

/* ---------------------------------------------
   Header
--------------------------------------------- */
.site-header{
  position: absolute;
  top:0; left:0; right:0;
  z-index: 5;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--edge);
  padding-bottom: 0;
}

.wordmark{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  text-decoration: none;
  color: var(--paper);
  mix-blend-mode: difference;
}

.header-nav{
  display: flex;
  gap: clamp(16px, 2.5vw, 28px);
}

.header-link{
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--paper);
  mix-blend-mode: difference;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.header-link:hover{ border-color: currentColor; }

/* No hero behind the header on album pages */
[data-page="album"] .site-header{ position: static; }
[data-page="album"] .wordmark,
[data-page="album"] .header-link{ color: var(--ink); mix-blend-mode: normal; }

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero{
  position: relative;
  height: 92vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
}

.hero-media{
  position:absolute;
  inset:0;
  display:block;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  animation: heroReveal 1.1s ease forwards;
  animation-delay: 0.15s;
}

@keyframes heroReveal{
  from{ opacity: 0; transform: scale(1.02); }
  to{ opacity: 1; transform: scale(1); }
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(10,10,8,0.62) 0%, rgba(10,10,8,0.05) 42%, rgba(10,10,8,0) 60%);
  pointer-events: none;
}

.hero-copy{
  position:absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: clamp(28px, 5vh, 56px);
  z-index: 2;
  color: #F5F3EA;
}

.hero-eyebrow{
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #C8C4B4;
  margin: 0 0 10px;
}

.hero-copy h1{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0;
  max-width: 14ch;
}

/* ---------------------------------------------
   Intro line
--------------------------------------------- */
.section-intro{
  padding: clamp(28px, 5vh, 48px) var(--edge) clamp(18px, 3vh, 28px);
  border-bottom: 1px solid var(--line);
}

.section-intro p{
  margin:0;
  max-width: 52ch;
  color: var(--stone);
  font-size: 0.95rem;
}

.section-intro .count{ font-family: var(--mono); color: var(--ink); }

/* ---------------------------------------------
   Gallery — masonry via CSS columns
--------------------------------------------- */
.gallery{
  padding: var(--gutter) var(--edge) 0;
  column-count: 1;
  column-gap: var(--gutter);
}

@media (min-width: 640px){
  .gallery{ column-count: 2; }
}
@media (min-width: 1024px){
  .gallery{ column-count: 3; }
}
@media (min-width: 1440px){
  .gallery{ column-count: 4; }
}

.tile{
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--gutter);
  overflow: hidden;
  background: #DEDACB;
}

.tile img{
  display:block;
  width:100%;
  height:auto;
}

.tile .tag{
  position:absolute;
  left:10px;
  bottom:10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #F5F3EA;
  background: rgba(15,15,10,0.55);
  padding: 3px 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tile:hover .tag{
  opacity: 1;
  transform: translateY(0);
}

.tile a{ display:block; }

/* ---------------------------------------------
   Albums (homepage grid)
--------------------------------------------- */
.albums{
  margin-top: clamp(32px, 6vh, 64px);
  padding: clamp(28px, 5vh, 48px) var(--edge) 0;
  border-top: 1px solid var(--line);
}

.section-title{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0 0 clamp(18px, 3vh, 28px);
}

.album-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 36px) var(--gutter);
}

.album-card{
  display:block;
  text-decoration: none;
}

.album-cover{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #DEDACB;
}

.album-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.album-card:hover .album-cover img{ transform: scale(1.03); }

.album-card h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 12px 0 4px;
}

.album-meta{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--stone);
}

/* ---------------------------------------------
   Album page
--------------------------------------------- */
.album-header{
  padding: clamp(28px, 6vh, 64px) var(--edge) clamp(18px, 3vh, 28px);
  border-bottom: 1px solid var(--line);
}

.back-link{
  font-size: 0.85rem;
  color: var(--stone);
  text-decoration: none;
}
.back-link:hover{ color: var(--teal); }

.album-header h1{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 14px 0 10px;
}

.album-description{
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--stone);
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-line;
}

[data-page="album"] .tile a{ cursor: zoom-in; }

/* ---------------------------------------------
   Lightbox (album photo viewer)
--------------------------------------------- */
body.lightbox-open{ overflow: hidden; }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C0C09;
  color: #F5F3EA;
  user-select: none;
}
.lightbox[hidden]{ display: none; }

.lightbox-image{
  display: block;
  max-width: calc(100vw - 2 * var(--edge));
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-bar{
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--edge);
}

.lightbox-info{
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: #C8C4B4;
}
.lightbox-credit{ opacity: 0.7; }

.lightbox-actions{
  display: flex;
  gap: 4px;
}

.lightbox-button,
.lightbox-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.lightbox-button:hover,
.lightbox-nav:hover{ opacity: 1; }

.lightbox-button{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.lightbox-button:hover{ background: rgba(245, 243, 234, 0.1); }

.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 96px;
}
.lightbox-nav.prev{ left: 0; }
.lightbox-nav.next{ right: 0; }

.lightbox button:focus-visible{
  outline: 2px solid #F5F3EA;
  outline-offset: 2px;
  opacity: 1;
}

@media (max-width: 640px){
  .lightbox-image{ max-width: 100vw; }
  .lightbox-nav{ width: 44px; background: rgba(12, 12, 9, 0.35); }
}

/* ---------------------------------------------
   Empty state
--------------------------------------------- */
.empty-state{
  margin: 0;
  padding: 64px var(--edge);
  text-align: center;
  color: var(--stone);
  font-size: 0.95rem;
}

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer{
  margin-top: clamp(40px, 8vh, 80px);
  padding: 28px var(--edge) 40px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer-row{
  font-size: 0.85rem;
  color: var(--stone);
}

.footer-row a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-row a:hover{
  color: var(--teal);
  border-color: currentColor;
}

.footer-sep{
  margin: 0 8px;
  color: var(--line);
}

.footer-legal{
  margin: 6px 0 0;
  max-width: 130ch;
  font-size: 0.75rem;
  text-wrap: balance;
  line-height: 1.55;
  color: var(--stone);
}
.footer-legal a{ text-decoration: none; border-bottom: 1px solid var(--line); }
.footer-legal a:hover{ color: var(--teal); border-color: currentColor; }

/* ---------------------------------------------
   Accessibility
--------------------------------------------- */
a:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation: none; opacity: 1; }
  html{ scroll-behavior: auto; }
}