/* layout */
.page-header {
  padding: var(--s5) 0 var(--s4);
}

.page-header h1 {
  margin:      10px 0 12px;
  font-size:   clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.lede {
  margin:    0;
  color:     var(--muted);
  font-size: 0.95rem;
  max-width: 78ch;
}

/* category nav */
.category-nav {
  display:       flex;
  flex-wrap:     wrap;
  gap:           10px;
  padding:       18px 0;
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
}

.category-nav a {
  font-size:     0.8rem;
  padding:       8px 14px;
  border:        1px solid var(--line2);
  border-radius: var(--r);
  background:    var(--panel);
  color:         var(--ink);
  transition:    background .2s;
}

.category-nav a:hover {
  background:      var(--ink);
  color:           var(--panel);
  text-decoration: none;
}

/* collapsible sections */
.project-section {
  margin-bottom: 12px;
}

.section-toggle {
  width:           100%;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         16px 0;
  border-bottom:   1px solid var(--line);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  text-align:      left;
  font:            inherit;
}

.section-toggle h2 {
  font-size:      clamp(1.25rem, 2.5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: .14em;
  color:          var(--muted);
  margin:         0;
  line-height:    1.1;
}

.section-toggle p {
  margin:    3px 0 0;
  color:     var(--muted);
  font-size: 0.875rem;
  max-width: 72ch;
}

.section-toggle .chevron {
  font-size:   1.125rem;
  color:       var(--muted);
  transition:  transform .3s;
  flex-shrink: 0;
  margin-left: 16px;
}

.project-section.open .section-toggle .chevron {
  transform: rotate(180deg);
}

.section-body {
  max-height: 0;
  overflow:   hidden;
  transition: max-height .5s;
}

/* not rly a real max-height */
.project-section.open .section-body {
  max-height: 12000px;
}

.section-body-inner {
  padding-top: var(--s4);
}

/* list items */
.project-item {
  display:        flex;
  flex-wrap:      wrap;
  gap:            20px;
  align-items:    flex-start;
  margin-bottom:  28px;
  padding-bottom: 28px;
  border-bottom:  1px solid var(--line);
}

.project-item:last-child {
  border-bottom:  none;
  margin-bottom:  0;
  padding-bottom: 0;
}

.project-thumb {
  width:         160px;
  height:        100px;
  flex-shrink:   0;
  border:        1px solid var(--line);
  border-radius: var(--r);
  box-shadow:    var(--shadow);
  overflow:      hidden;
}

.project-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.project-thumb-placeholder {
  width:           100%;
  height:          100%;
  background:      var(--ink);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.project-thumb-placeholder span {
  color:          rgba(255, 255, 255, .3);
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.project-info h3 {
  font-size: 1rem;
  margin:    0 0 4px;
}

.project-info p {
  margin:      0;
  color:       var(--muted);
  font-size:   0.8rem;
  line-height: 1.5;
  max-width:   60ch;
}

.project-info .story-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin:    6px 0;
}

.project-info .story-tags .tag {
  font-size: 0.7rem;
  padding:   3px 7px;
}

.project-info .story-link {
  font-size:  0.8rem;
  margin-top: 6px;
}

/* video embed */
.story-media {
  border:        1px solid var(--line);
  border-radius: var(--r);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  margin-bottom: 20px;
}

.story-media-16x9 {
  position:    relative;
  padding-top: 56.25%;
}

.story-media-16x9 iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   none;
}

/* responsive */
@media (max-width: 640px) {
  .project-item {
    flex-direction: column;
  }

  .project-thumb {
    width:  100%;
    height: 180px;
  }
}