/*
2026-05-04- init v0
portfolio-custom.css, version: 0.0.0
CDX=true
[LAYERSv0]: L3
*/

#header .site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45em;
  list-style: none;
  margin: 1.35em 0 0;
  padding: 0;
}

#header .site-nav a {
  border: solid 1px rgba(85, 85, 85, 0.18);
  border-radius: 4px;
  color: #555;
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 0.7em 0.85em;
  text-decoration: none;
  text-transform: uppercase;
}

#header .site-nav a:hover,
#header .site-nav a.active {
  border-color: #7289DA;
  color: #7289DA;
}

#header .kicker {
  color: #888;
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.65em;
  text-transform: uppercase;
}

#header .deck {
  margin-top: 1em;
}

#thumbnails article .meta {
  display: none;
}

body.variant-sequence #thumbnails article:nth-child(4n+1),
body.variant-sequence #thumbnails article:nth-child(4n+4) {
  width: 100%;
}

body.variant-sequence #thumbnails article .thumbnail:after {
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.58));
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

body.variant-sequence #thumbnails article h2 {
  bottom: 1em;
  color: #fff;
  display: block;
  font-size: 0.85em;
  font-weight: 700;
  left: 1em;
  position: absolute;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

body.variant-mono #thumbnails article .thumbnail img {
  filter: grayscale(1) contrast(1.22);
}

body.variant-mono #thumbnails article:nth-child(3n) .thumbnail img {
  filter: grayscale(1) contrast(1.45) brightness(0.86);
}

body.variant-mono #thumbnails article .thumbnail:before {
  box-shadow: inset 0 0 0 2px #111, inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}

body.variant-mono #header .site-nav a:hover,
body.variant-mono #header .site-nav a.active {
  border-color: #111;
  color: #111;
}

body.variant-contact #main {
  width: 26em;
}

body.variant-contact #thumbnails {
  padding: 0 0.5em 0.5em;
}

body.variant-contact #thumbnails article {
  border: solid 0.25em #fff;
  width: 33.333%;
}

body.variant-contact #thumbnails article:nth-child(5n+1) {
  width: 66.666%;
}

body.variant-contact #thumbnails article .thumbnail img {
  filter: saturate(0.82) contrast(1.08);
}

@media screen and (max-width: 1280px) {
  body.variant-contact #main {
    width: 21em;
  }
}

@media screen and (max-width: 980px) {
  #header .site-nav {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 480px) {
  #header .site-nav {
    justify-content: center;
  }

  #header .site-nav a {
    font-size: 0.68em;
  }

  body.variant-sequence #thumbnails article,
  body.variant-contact #thumbnails article,
  body.variant-contact #thumbnails article:nth-child(5n+1) {
    width: 50%;
  }
}