/* EDIT: colors and fonts live here. Every page uses this one file. */
:root {
  --text: #151515;
  --muted: #8a8a8a;
  --bg: #ffffff;
  --gap: 2.2rem;               /* side margin of the whole site */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Century Gothic", "Avenir Next", Futura, "Trebuchet MS", sans-serif;
  font-weight: 300;
  line-height: 1.7;
}

/* ----- Header: name with menu beside it ----- */
header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 2.2rem var(--gap) 0;
  margin-bottom: 5rem;
}
.site-name {
  font-size: clamp(2rem, 5.5vw, 4rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
}
nav a {
  margin-right: 1.25rem;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

/* ----- Content ----- */
main { padding: 0 var(--gap) 4rem; }
/* Home photo: keeps its own shape (wide or tall), never cropped or stretched,
   and never taller than the browser window. */
.hero { display: block; width: auto; height: auto; max-width: 100%; max-height: 78vh; object-fit: contain; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}
.grid img { width: 100%; height: auto; display: block; }

.text { max-width: 34rem; font-size: 1.05rem; }
.text a { color: var(--text); }
h1 { font-weight: 300; font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1.5rem; }

footer { padding: 0 var(--gap) 3rem; color: var(--muted); font-size: .85rem; letter-spacing: .05em; }

/* ----- Photography subcategories (Color / Black & white) ----- */
.subnav { margin-bottom: 2rem; }
.subnav button {
  background: none; border: 0; padding: 0; margin-right: 1.25rem;
  font: inherit; font-size: .85rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.subnav a {
  margin-right: 1.25rem; font-size: .85rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.subnav button:hover, .subnav button.active, .subnav a:hover, .subnav a.active { color: var(--text); }
.subnav button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.group { display: none; }
.group.show { display: grid; }

/* ----- Photo viewer (click a photo to enlarge) ----- */
.grid img { cursor: zoom-in; }
.viewer {
  display: none; position: fixed; inset: 0; z-index: 10;
  background: rgba(255, 255, 255, .97);
  align-items: center; justify-content: center;
}
.viewer.open { display: flex; }
.viewer img { max-width: 88vw; max-height: 88vh; width: auto; height: auto; cursor: default; }
.viewer button {
  position: absolute; background: none; border: 0; padding: .75rem 1rem;
  font: inherit; font-size: 2rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.viewer button:hover, .viewer button:focus-visible { color: var(--text); }
.viewer .prev  { left: .5rem;  top: 50%; transform: translateY(-50%); }
.viewer .next  { right: .5rem; top: 50%; transform: translateY(-50%); }
.viewer .close { right: .5rem; top: .5rem; font-size: 1.6rem; }
/* ----- Accordion (click a company to unfold it) ----- */
.accordion { max-width: 34rem; }
.accordion details { border-top: 1px solid #e3e3e3; padding: 1rem 0; }
.accordion details:last-child { border-bottom: 1px solid #e3e3e3; }
.accordion summary {
  cursor: pointer; list-style: none;
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: "•"; display: inline-block; width: 1.5rem; }
.accordion details[open] > summary { color: var(--text); }
.accordion details[open] > summary::before { content: "–"; }
.accordion details p { margin: 1rem 0 0 1.5rem; }
img { border-radius: 12px; }
/* Company logos inside the Game Dev list (visible after unfolding) */
.accordion .company-logo { display: block; width: 7rem; height: auto; margin: 1rem 0 0 1.5rem; }