/* ===========================================================================
   CUBE CSS — Composition · Utility · Block · Exception
   Blocks use BEM naming: .block__element--modifier
   =========================================================================== */

/* --- Global / reset ----------------------------------------------------- */

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

:root {
  --color-bg: #111;
  --color-fg: #e8e8e8;
  --color-muted: #9a9a9a;
  --color-accent: #8ab4f8;

  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;

  --measure: 72rem;
  --radius: 4px;

  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

img,
picture {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
}

/* --- Composition -------------------------------------------------------- */

/* Center content within a comfortable measure. */
.wrapper {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-l) var(--space-m);
}

/* Owl: consistent vertical rhythm between flow children. */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-m));
}

/* --- Blocks ------------------------------------------------------------- */

/* site-header */
.site-header__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
}

/* album-grid */
.album-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-l);
}

/* album-card */
.album-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.album-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.album-card__title {
  display: block;
  margin-block-start: var(--space-s);
  font-weight: 600;
}

.album-card__date {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.album-card:hover .album-card__title,
.album-card:focus-visible .album-card__title {
  color: var(--color-accent);
}

/* album-header */
.back-link {
  text-decoration: none;
}

.album-header__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.album-header__date {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.album-header__description {
  max-width: 60ch;
  color: var(--color-muted);
}

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-l);
}

/* photo */
.photo {
  margin: 0;
}

.photo__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.photo__caption {
  margin-block-start: var(--space-s);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.photo__tags {
  margin: var(--space-s) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.photo__tag {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
}

.photo__tag a {
  text-decoration: none;
}