/* Dibujos sub-site. Copied from the main site's style.css (masthead, grid,
   footer, lightbox); sub-site additions are at the end. */

:root {
  --paper: #fcfbf9;
  --ink: #1a1815;
  --muted: #76726b;
  --line: #e5e1da;
  --scrim: #100f0d;
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(6px, 1.2vw, 14px);
  --measure: 62ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad);
  top: 10px;
  z-index: 100;
  background: var(--paper);
  padding: 8px 12px;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 3vw, 32px) var(--pad) clamp(14px, 2.5vw, 24px);
}

.wordmark {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  font-size: 14px;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- grid ---------- */

.grid {
  list-style: none;
  margin: 0;
  padding: 0 var(--pad) clamp(40px, 8vw, 90px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.grid__item[hidden] { display: none; }

.thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #efece7;
}

.thumb img,
.thumb picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb img { transition: opacity 220ms ease; }
.thumb:hover img { opacity: 0.82; }

.thumb__caption {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 160ms ease;
}
.grid__item:hover .thumb__caption,
.grid__item:focus-within .thumb__caption { opacity: 1; }

.grid__empty {
  padding: 0 var(--pad) 80px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- footer ---------- */

.footer {
  padding: 20px var(--pad) 30px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb__stage {
  position: absolute;
  inset: 0;
  padding: clamp(30px, 6vh, 64px) clamp(12px, 4vw, 72px) clamp(46px, 8vh, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The image fills the stage and letterboxes itself, so how large it renders
   never depends on which file the browser happened to pick. */
.lb__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.lb__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(12px, 4vw, 26px);
  color: #f2efe9;
  font-size: 12px;
}

.lb__caption strong {
  font-weight: 500;
  margin-right: 8px;
}
.lb__caption span { color: #a5a09a; }

.lb__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  color: #a5a09a;
  cursor: pointer;
}
.lb__btn:hover { color: #fff; }

.lb__close {
  position: absolute;
  top: 6px;
  right: clamp(6px, 3vw, 18px);
  font-size: 20px;
  line-height: 1;
  padding: 12px;
}

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  padding: 16px 12px;
}
.lb__prev { left: 0; }
.lb__next { right: 0; }

.lb__link {
  border-bottom: 1px solid transparent;
}
.lb__link.is-copied { color: #fff; }

body.lb-open { overflow: hidden; }

@media (max-width: 620px) {
  .lb__nav { display: none; }
  .lb__stage { padding: 24px 6px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- sub-site additions ---------- */

.wordmark__sub {
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.3em;
}

/* Folder list wraps under the name instead of overflowing. */
.masthead { flex-wrap: wrap; }
.nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4px;
}
@media (max-width: 620px) {
  .masthead { flex-direction: column; gap: 10px; }
  .nav { justify-content: flex-start; }
}

/* Captions always visible: reviewers refer to pieces by name, and phones have no hover.
   Delete this rule to get the main site's hover-only captions back. */
.thumb__caption {
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-title {
  margin: 0;
  padding: 0 var(--pad) clamp(14px, 2.5vw, 24px);
  font-size: 15px;
  font-weight: 500;
}
.folder-title span,
.folder-card__label span {
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.4em;
}

.folder-card__label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  text-decoration: none;
}
.grid--folders .thumb:hover img { opacity: 0.82; }

.notice {
  padding: 0 var(--pad) 80px;
  color: var(--muted);
  font-size: 14px;
}
.notice a { color: var(--ink); }

/* Thumbnail shows instantly in the viewer; the full file replaces it once loaded. */
.lb__stage img.is-loading { filter: blur(6px); }
.lb__stage img { transition: filter 160ms ease; }