:root {
  --bg:        #000000;
  --fg:        #ffffff;
  --accent:    #e0db00;      
  --muted:     #555555;
  --font-body: Georgia, 'Times New Roman', Times, serif;

  --card-min:  260px;         
  --card-gap:  2.5rem;
  --card-img-ratio: 5 / 6;    

  --max-width: 1200px;
  --pad-x:     clamp(1.5rem, 5vw, 4rem);
  --pad-y:     clamp(2rem, 6vh, 5rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100dvh;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

.site-header {
  text-align: center;
  padding: var(--pad-y) var(--pad-x) 0;
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  letter-spacing: 0.06em;
  color: var(--fg);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--card-gap);
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--max-width);
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card__image {
  aspect-ratio: var(--card-img-ratio);
  background: var(--fg);        
  overflow: hidden;
  position: relative;
}

.card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: multiply;
}
.card:hover .card__image::after { opacity: 0.12; }

.card__caption {
  text-align: center;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: lowercase;
}

.site-footer {
  text-align: center;
  padding: 0 var(--pad-x) var(--pad-y);
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.inner-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

.inner-page h1 {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: normal;
  letter-spacing: 0.04em;
  margin-bottom: 2.5rem;
  color: var(--accent);
}

.inner-page p,
.inner-page li {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.75;
  color: var(--fg);
  max-width: 65ch;
  margin-bottom: 1.2rem;
}

.inner-page .back-link {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.inner-page .back-link:hover { color: var(--accent); }