/* A reading-first project list, scoped to Selected work. */
#work .gallery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}
#work .gallery-toolbar h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
#work .gallery-toolbar p { flex-shrink: 0; color: var(--accent); }
#work .gallery-toolbar--additional { margin-top: 72px; }
#work .project-gallery {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#work .project-gallery:before { content: none; }
#work .project-window:nth-child(n) {
  margin: 0;
  transform: none;
  border-bottom: 1px solid var(--line);
}
#work .project-window > a {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: 30px 16px 30px 0;
  min-height: 204px;
  height: auto;
}
#work .hex-window {
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  clip-path: none;
  background: none;
}
#work .hex-window:before, #work .hex-window:after { content: none; }
#work .hex-window img { width: 100%; height: 100%; }
#work .window-number { display: none; }
#work .window-copy { padding: 0; box-shadow: none; background: none; min-width: 0; }
#work .window-stage { margin-bottom: 8px; }
#work .window-copy h4 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.16;
}
#work .window-copy p { margin-top: 10px; max-width: 58ch; }
#work .project-window > a:is(:hover, :focus-visible) h4 { color: var(--accent); }
#work .project-window > a:focus-visible { outline-offset: 5px; }
#work .project-list--additional .project-window > a {
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 144px;
  padding-block: 24px;
}
#work .project-list--additional h4 { font-size: clamp(1.65rem, 2.6vw, 2rem); }
#work .gallery-note {
  margin: 0 7% 30px auto;
  font-size: 1.6rem;
}
#work .gallery-coda { padding-top: 64px; }
#work .margin-mycelium { width: 180px; height: auto; flex-shrink: 0; transform: rotate(-5deg); }
@media (max-width: 700px) {
  #work .gallery-toolbar { gap: 14px; }
  #work .gallery-toolbar p { font-size: .75rem; }
  #work .gallery-toolbar--additional { margin-top: 52px; }
  #work .project-window > a {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 22px;
    padding: 26px 0;
    min-height: 180px;
  }
  #work .window-copy h4 { font-size: 1.8rem; }
  #work .window-stage { font-size: .75rem; letter-spacing: .045em; }
  #work .project-list--additional .project-window > a { grid-template-columns: 64px minmax(0, 1fr); }
  #work .project-list--additional h4 { font-size: 1.65rem; }
  #work .gallery-note { margin: 4px 5% 28px auto; font-size: 1.5rem; }
  #work .margin-mycelium { width: 140px; }
}
@media (max-width: 400px) {
  #work .project-window > a { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  #work .project-list--additional .project-window > a { grid-template-columns: 54px minmax(0, 1fr); }
  #work .gallery-toolbar { flex-wrap: wrap; gap: 8px; }
  #work .margin-mycelium { width: 120px; }
}

/* Featured experiences are text-only; additional projects retain their art. */
#work .project-list--featured .project-window > a {
  display: block;
  min-height: 0;
  padding: 32px 0;
}

/* Additional projects use the same uncluttered, text-only layout. */
#work .project-list--additional .project-window > a {
  display: block;
  min-height: 0;
  padding: 28px 0;
}

/* Three featured experiences, followed by concise project rows. */
#work .project-list--featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
#work .project-list--featured .project-window > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  height: 100%;
  padding: 32px 0;
}
#work .project-list--featured .window-copy { flex: 1; }
#work .project-list--featured h4 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
#work .project-list--additional .project-window > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 32px;
  align-items: center;
}
#work .project-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 64px;
  padding: 16px 24px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  flex-shrink: 0;
}
#work .project-window > a:is(:hover, :focus-visible) .project-more {
  background: var(--accent);
  color: #0b1711;
}
@media (max-width: 700px) {
  #work .project-list--featured { grid-template-columns: 1fr; gap: 0; }
  #work .project-list--additional .project-window > a { grid-template-columns: 1fr; gap: 20px; }
  #work .project-more { width: 100%; }
}

/* Restore the staggered featured composition while keeping mobile linear. */
@media (min-width: 701px) {
  #work .project-list--featured {
    border-top: 0;
    padding-bottom: clamp(64px, 8vw, 98px);
  }
  #work .project-list--featured .project-window {
    border-top: 1px solid var(--line);
  }
  #work .project-list--featured .project-window:nth-child(2) {
    transform: translateY(clamp(64px, 8vw, 98px));
  }
}

#work .project-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 160px; min-height: 64px; padding: 16px 24px;
  border: 1px solid var(--accent); border-radius: 2px;
  color: var(--accent); font-size: 1rem; font-weight: 600;
  line-height: 1.3; cursor: pointer; list-style: none;
}
#work .project-toggle::-webkit-details-marker { display: none; }
#work .project-toggle:hover { background: var(--accent); color: #0b1711; }
#work .project-toggle:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
#work .when-open, #work .additional-disclosure[open] .when-closed { display: none; }
#work .additional-disclosure[open] .when-open { display: inline; }
#work .additional-disclosure[open] .project-toggle { margin-bottom: 28px; }
@media (max-width: 700px) { #work .project-toggle { width: 100%; } }