/* One archive folder with three index tabs. The chosen folder is filed to the front. */
.folder {
  position: relative;
  z-index: 2;
  padding: 0 clamp(var(--space-sm), 1.6vw, var(--space-lg));
}

.folder {
  --corner: var(--radius-hero);
  --shoulder: 14px;
}

.folder__tabs {
  position: relative;
  display: flex;
  gap: var(--space-xs);
  height: var(--tab-height);
  /* The first tab starts where the folder's rounded corner ends. */
  padding-left: calc(var(--corner) + var(--shoulder) + var(--space-xs));
}

.folder__tab {
  position: relative;
  align-self: flex-end;
  height: calc(var(--tab-height) - 8px);
  padding: 0 clamp(var(--space-compact), 2vw, var(--space-xl));
  border: 0;
  border-radius: var(--shoulder) var(--shoulder) 0 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--ui);
  font-weight: 600;
  font-size: clamp(.875rem, 1.1vw, 1.0625rem);
  white-space: nowrap;
  transform: translateY(8px);
  transition: transform var(--settle) var(--ease), height var(--settle) var(--ease);
}
.folder__tab:hover { transform: translateY(4px); }
.folder__tab[aria-selected='true'] { z-index: 2; height: var(--tab-height); transform: none; }
.folder__tab:focus-visible { z-index: 3; outline-offset: -5px; outline-color: var(--on-paper); }

/* The concave shoulders that make a tab read as part of its folder. */
.folder__tab[aria-selected='true']::before,
.folder__tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--shoulder);
  height: var(--shoulder);
}
.folder__tab[aria-selected='true']::before { right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--shoulder) - .5px), var(--paper) var(--shoulder)); }
.folder__tab[aria-selected='true']::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--shoulder) - .5px), var(--paper) var(--shoulder)); }

[data-tab='minis'] { --paper: var(--paper-bone); --on-paper: var(--paper-ink); --quiet-mix: 78%; --paper-rule: rgb(40 35 43 / .2); }
[data-tab='projects'] { --paper: var(--paper-rose); --on-paper: var(--paper-ink); --quiet-mix: 88%; --paper-rule: rgb(40 35 43 / .24); }
[data-tab='paints'] { --paper: var(--paper-wine); --on-paper: var(--paper-bone); --quiet-mix: 86%; --paper-rule: rgb(239 232 220 / .28); }

.folder__stack {
  position: relative;
  z-index: 1;
  display: grid;
  border-radius: var(--corner);
  background: var(--ground);
}

.sheet {
  --focus: var(--on-paper);
  --on-paper-quiet: color-mix(in srgb, var(--on-paper) var(--quiet-mix), var(--paper));
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--space-xl), 5vw, 96px);
  align-items: start;
  padding: clamp(var(--space-xl), 5.5vw, 96px) clamp(var(--space-md), 4vw, 72px) clamp(var(--space-xxl), 6vw, 104px);
  border-radius: var(--corner);
  background: var(--paper);
  color: var(--on-paper);
}
/* A hidden folder takes no room, except for the moment it is being covered. */
.sheet[hidden]:not(.is-leaving) { display: none; }
.sheet.is-active { z-index: 2; }
.sheet.is-leaving { visibility: visible; z-index: 1; }
.sheet.is-entering { animation: file-in var(--settle) var(--ease) backwards; }
.sheet.is-entering .sheet__copy,
.sheet.is-entering .sheet__preview { animation: settle-in var(--settle) var(--ease) backwards; animation-delay: 50ms; }
.sheet.is-entering .sheet__preview { animation-delay: 90ms; }
.sheet:focus-visible { outline-offset: -8px; border-radius: var(--corner); }

@keyframes file-in {
  from { transform: translateY(64px); opacity: 0; }
}
@keyframes settle-in {
  from { opacity: 0; transform: translateY(14px); }
}

.sheet__copy { max-width: 32rem; position: sticky; top: var(--space-xl); }

.sheet__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.sheet__lede {
  margin-top: var(--space-lg);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.5;
}

.sheet__points { margin-top: var(--space-xl); border-top: 1px solid var(--paper-rule); }
.sheet__points li { padding: var(--space-compact) 0; border-bottom: 1px solid var(--paper-rule); color: var(--on-paper-quiet); }

.sheet__remark { margin-top: var(--space-lg); font-weight: 600; }
.sheet__remark:empty { display: none; }

.sheet__preview { min-width: 0; max-width: 640px; justify-self: end; width: 100%; }
.sheet__caption { margin-top: var(--space-compact); color: var(--on-paper-quiet); font-size: .8125rem; }

@media (max-width: 900px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet__copy { max-width: 34rem; position: static; }
  .sheet__preview { justify-self: stretch; }
}

@media (max-width: 480px) {
  .folder { --corner: var(--radius-soft); --shoulder: 10px; }
  .folder__tabs { gap: 2px; }
  .folder__tab { padding: 0 var(--space-compact); }
}

@media (max-width: 350px) {
  .folder__tab { padding: 0 var(--space-sm); font-size: .8125rem; }
}