/* ============================================================
   photography.css: used ONLY by photography.html.
   Loaded after style.css; it changes colours and adds photo
   layout, but leaves the font, title and menu size/spacing
   exactly as on index.html and teaching.html.
   ============================================================ */

/* ---------- Page colours (the equivalent of bgcolor on your other pages) ---------- */
body.photo-page {
  background: #000;
  color: #eee;
  margin: 0;              /* lets coloured sections reach the window edges...       */
}
.photo-page > h1,
.photo-page > .navbar {
  margin-left: 8px;       /* ...while the title and menu keep the browser's default */
  margin-right: 8px;      /*    8px edge, exactly as on your other pages            */
}
.photo-page > h1 { color: #fff; }                  /* title colour */

/* ---------- Menu colours on this page ---------- */
.photo-page .navbar   { border-bottom-color: #555; }
.photo-page .navbar a { color: #e8e8e8; }          /* <- menu font colour */
.photo-page .navbar a.active,
.photo-page .navbar a:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- Coloured sections ----------
   Each sets a background AND a text colour, inherited by
   everything inside. Add more by copying a line.          */
.band       { padding: 1.5rem 8px; }   /* 8px: text lines up with the title */
.band.dark  { background: #000000; color: #eeeeee; }
.band.light { background: #ffffff; color: #111111; }
.band.warm  { background: #efe9df; color: #2b2b2b; }

.band.dark a { color: #9cc3ff; }       /* readable text links on black */

/* ---------- Photos ---------- */
.photo { margin: 0 auto 3rem; }        /* removes <figure>'s default indent; centres */
.photo img {
  display: block;
  max-width: 100%;                     /* never wider than the window          */
  max-height: 85vh;                    /* never taller than 85% of the screen  */
  width: auto;
  height: auto;                        /* keep proportions                     */
  margin: 0 auto;                      /* centre                               */
}

/* Size variants: add to the <figure>, e.g. class="photo medium" */
.photo.medium { max-width: 70%; }
.photo.small  { max-width: 45%; }

/* Photos side by side */
.photo-row { display: flex; gap: 1.5rem; align-items: flex-start; }
.photo-row .photo { flex: 1; min-width: 0; }

/* ---------- Captions ---------- */
.photo figcaption {
  margin-top: 0.6rem;
  font-style: italic;
  text-align: center;
  opacity: 0.8;
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .photo.medium, .photo.small { max-width: 100%; }
  .photo-row { flex-direction: column; }
}