/* Collapsed project folders. Remove this stylesheet link to restore the previous layout. */
.project-grid {
  position: relative;
  gap: 0;
  padding-top: 18px;
  perspective: 1200px;
}

.project-card {
  --stack-row: 96px;
  position: relative;
  height: auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--folder-ink) 28%, transparent);
  box-shadow: 0 -8px 18px #1112;
  transition: transform .34s ease, box-shadow .34s ease;
}

.project-card:nth-child(even) { transform: translateX(8px) rotate(.18deg); }
.project-card:nth-child(odd) { transform: translateX(-5px) rotate(-.12deg); }
.project-card:hover,
.project-card:focus-within,
.project-card.is-expanded {
  z-index: 8;
  transform: translateX(0) rotate(0);
  box-shadow: 0 -10px 22px #1112, 0 22px 34px #1113;
}

.project-tab { display: none; }

.project-link {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--folder);
  color: var(--folder-ink);
  text-align: left;
  border: 0;
  border-radius: 0;
}

.project-link:focus-visible {
  outline: 3px solid #f46c3e;
  outline-offset: -5px;
}

.project-summary {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  height: var(--stack-row);
  padding: 0 clamp(24px,4vw,52px);
  border-bottom: 1px dashed color-mix(in srgb, var(--folder-ink) 35%, transparent);
}

.project-summary::before {
  content: "";
  position: absolute;
  left: clamp(24px,4vw,52px);
  top: 0;
  width: 152px;
  height: 10px;
  background: color-mix(in srgb, var(--folder-ink) 13%, transparent);
  clip-path: polygon(0 0,88% 0,100% 100%,0 100%);
}

.project-summary-index {
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 1.5px;
  color: var(--folder-muted);
  white-space: nowrap;
}

.project-summary-name {
  min-width: 0;
  font-size: clamp(22px,2.4vw,34px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.8px;
  color: var(--folder-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-summary-name em {
  margin-left: 10px;
  font-size: .53em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.project-summary-action {
  display: flex;
  align-items: center;
  gap: 13px;
  font: 700 8px/1.4 var(--mono);
  letter-spacing: 1.2px;
  color: var(--folder-muted);
}

.project-summary-action i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 400 17px/1 var(--sans);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.project-card:hover .project-summary-action i,
.project-card:focus-within .project-summary-action i,
.project-card.is-expanded .project-summary-action i {
  transform: rotate(180deg);
  background: var(--folder-ink);
  color: var(--folder);
}

.project-reveal {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: clamp(28px,4vw,54px);
  min-height: 0;
  max-height: 0;
  padding: 0 clamp(28px,4vw,52px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  visibility: hidden;
  transition: max-height .56s cubic-bezier(.22,.78,.18,1), padding .56s cubic-bezier(.22,.78,.18,1), opacity .28s ease .1s, transform .42s ease .06s, visibility 0s linear .56s;
}

.project-card:hover .project-reveal,
.project-card:focus-within .project-reveal,
.project-card.is-expanded .project-reveal {
  max-height: 900px;
  padding-top: 28px;
  padding-bottom: 44px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s, 0s, .08s, .03s, 0s;
}

.project-reveal .project-text { padding: 0 0 6px; }
.project-reveal .project-visual { margin: 0; }

@media (max-width: 800px) {
  .project-grid { padding-top: 12px; }
  .project-card { --stack-row: 78px; }
  .project-card:nth-child(n) { transform: none; }
  .project-card:hover { box-shadow: 0 -7px 15px #1112; }
  .project-card.is-expanded,
  .project-card:focus-within { box-shadow: 0 -8px 18px #1112,0 18px 26px #1113; }
  .project-summary { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; padding: 0 18px; }
  .project-summary::before { left: 18px; width: 98px; height: 8px; }
  .project-summary-index { font-size: 7px; letter-spacing: .9px; }
  .project-summary-name { font-size: clamp(16px,4.8vw,24px); letter-spacing: -.4px; }
  .project-summary-name em { display: block; margin: 4px 0 0; font-size: .55em; }
  .project-summary-action span { display: none; }
  .project-summary-action i { width: 29px; height: 29px; font-size: 14px; }
  .project-reveal { grid-template-columns: 1fr; align-content: start; gap: 22px; min-height: 0; padding: 22px 20px 36px; }
  .project-reveal .project-title { font-size: 34px; }
  .project-reveal .project-title span { font-size: 13px; }
  .project-reveal .project-visual { width: calc(100% - 14px); margin: 0 auto; }
}

@media (max-width: 420px) {
  .project-summary { padding-inline: 14px; }
  .project-summary::before { left: 14px; }
  .project-summary-index { max-width: 48px; white-space: normal; }
  .project-summary-name { font-size: 17px; }
  .project-reveal { padding-inline: 17px; gap: 18px; }
  .project-reveal .project-title { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-reveal,
  .project-summary-action i { transition: none; }
}