/* Five equally sized project files share one stack. */
.work-section{
  --folder-top:56px;
  --folder-tab-height:40px;
  position:relative;
  isolation:isolate;
  padding:0;
  overflow:visible;
  background:#171717;
  scroll-margin-top:0;
}
.work-section>.project{
  --folder-color:#f5f5f5;
  --folder-tab-left:0%;
  position:sticky;
  top:var(--folder-top);
  z-index:1;
  display:flex;
  flex-direction:column;
  width:100%;
  height:calc(100vh - var(--folder-top));
  height:calc(100svh - var(--folder-top));
  min-height:0;
  padding:0;
  margin:0;
  overflow:visible;
  color:#252525;
  background:transparent;
  transform:none;
  scroll-margin-top:var(--folder-top);
}
.work-section>.project-travel{--folder-color:#f3f3f5;--folder-tab-left:20%;z-index:2}
.project-travel>.folder-tab-row .folder-tab{background:#ffe430}
.work-section .project-travel .view-project:hover,.work-section .project-travel .view-project:focus-visible{background:#ffe430;box-shadow:0 0 0 6px #ffe430}
.work-section>.project-town{--folder-color:#d9d9d9;--folder-tab-left:0%;z-index:1}
.work-section>.project-bloom{--folder-tab-left:40%;z-index:3}
.work-section>.project-gift{--folder-color:#f2eee5;--folder-tab-left:60%;z-index:4}
.work-section>.project-collection{--folder-color:#e6e6e6;--folder-tab-left:80%;z-index:5}
.folder-tab-row{
  position:relative;
  flex:0 0 var(--folder-tab-height);
  height:var(--folder-tab-height);
  width:100%;
  overflow:visible;
  background:transparent;
}
.folder-tab{
  position:absolute;
  inset-block:0;
  left:var(--folder-tab-left);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:calc(20% + var(--folder-tab-height));
  max-width:calc(100% - var(--folder-tab-left));
  margin:0;
  padding:0 38px 0 32px;
  border:0;
  border-radius:5px 5px 0 0;
  clip-path:polygon(0 0,calc(100% - var(--folder-tab-height)) 0,100% 100%,0 100%);
  background:var(--folder-color);
  color:#252525;
  font:400 12px/20px var(--mono);
  letter-spacing:-.035em;
  text-align:left;
  white-space:nowrap;
  transition:none;
}
.folder-tab:hover .folder-label-long,.folder-tab:hover .folder-label-short{text-decoration:underline;text-underline-offset:4px}
.folder-tab:focus-visible{outline:2px solid #252525;outline-offset:-6px}
.folder-label-short{display:none}
.folder-index{
  position:absolute;
  top:0;
  right:32px;
  height:100%;
  display:flex;
  align-items:center;
  gap:16px;
  color:#f5f5f5;
  font:10px/20px var(--mono);
}
.folder-index>span{color:#aaa;font-size:9px;margin-right:14px}
.folder-index>a{padding:8px 0}
.folder-index>a:hover{text-decoration:underline;text-underline-offset:4px}
.folder-body{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  position:relative;
  flex:1 1 0;
  min-height:0;
  width:100%;
  padding:0 32px 18px;
  background:var(--folder-color);
  box-shadow:0 -1px 0 #17171706,0 -10px 24px #00000008;
}
.work-section .project-heading{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(220px,1fr);
  gap:40px;
  align-items:start;
  min-width:0;
  padding:25px 0 20px;
}
.work-section .project-heading h3{
  max-width:100%;
  margin:0;
  font-family:var(--sans);
  font-size:clamp(31px,3.35vw,53px);
  font-weight:400;
  letter-spacing:-.065em;
  line-height:1.22;
}
.work-section .project-heading h3 button,.work-section .project-heading h3 a{
  max-width:100%;
  padding:0;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  overflow-wrap:anywhere;
}
.work-section .project-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
  margin:0;
  padding:0;
  font:10px/19px var(--mono);
}
.work-section .project-meta>span:first-child{font-size:10px;line-height:19px;overflow-wrap:anywhere}
.work-section .project-meta>span:nth-child(2){font:11px/20px var(--sans);color:#454545}
.work-section .view-project{
  justify-self:auto;
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0 0;
  padding:0 0 1px;
  color:#252525;
  border:0;
  font:11px/22px var(--mono);
}
.work-section .view-project span{font-size:20px;line-height:20px}
.work-section .view-project:hover{text-decoration:underline;text-underline-offset:5px}
.work-section .project-description{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:49px;
  margin:0 -32px 26px;
  padding:10px 32px;
  border-top:0;
  border-bottom:1px dotted #25252588;
}
.work-section .project-description p{
  font:12px/22px var(--sans);
  max-width:78ch;
  margin:0;
  padding:0;
}
.work-section .project-image{
  display:block;
  align-self:stretch;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
}
.work-section .project-image>img:not(.cover-card){width:100%;height:100%;object-fit:cover}
.work-section .project-image:focus-visible{outline:2px solid #252525;outline-offset:-6px}
.work-section .project-heading button:focus-visible,.work-section .project-heading a:focus-visible,.work-section .view-project:focus-visible{outline-color:#252525}
.work-section .bloom-cover-word{left:4%;top:7%;font-size:clamp(40px,5.8vw,88px)}
.work-section .cover-card{width:24%;max-height:86%;max-width:none;object-fit:contain}
.work-section .cover-card-one{left:37%;bottom:6%}
.work-section .cover-card-two{right:7%;top:8%}
.work-section .travel-cover-title{font-size:clamp(48px,7vw,108px);top:9%}
.work-section .travel-cover>img{object-position:center 44%}
.work-section .town-cover-title{font-family:var(--sans);font-size:clamp(52px,7vw,108px);line-height:1.15;top:9%;left:6%}
.work-section .town-cover-title small{font-size:10px;margin-top:18px}
.work-section .gift-cover>img{object-fit:contain!important;background:#e8decf}
.work-section .collection-cover{display:flex;align-items:center;justify-content:center;background:#e6e6e6}
.work-section .collection-cover>img{min-width:0;object-fit:contain!important}
.work-section .image-corner{right:22px;bottom:18px;font-size:9px}
.work-section .project-image-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-width:0;
  min-height:30px;
  margin:0;
  padding:11px 0 0;
  color:#505050;
  font:8px/16px var(--mono);
}
.work-section .project-image-note>span:last-child{font:9px/16px var(--sans);text-align:right}
.work-section>.work-end{
  position:relative;
  z-index:6;
  margin:0;
  padding:25px 32px;
  min-height:70px;
  color:#aaa;
  background:#171717;
}
@media(min-width:1600px){
  .folder-body{padding-inline:40px}
  .folder-tab{padding-left:40px}
  .work-section .project-heading{padding-top:32px;padding-bottom:26px}
  .work-section .project-description{margin-inline:-40px;padding-inline:40px}
}
@media(max-width:1000px) and (min-width:701px){
  .work-section .project-heading{grid-template-columns:minmax(0,2.2fr) minmax(190px,1fr);gap:28px}
  .work-section .project-heading h3{font-size:clamp(29px,3.4vw,37px)}
  .folder-index{gap:12px}
  .folder-index>span{display:none}
  .folder-tab{font-size:10px;padding-left:24px}
}
@media(max-width:700px){
  .work-section{--folder-tab-height:34px}
  .work-section>.project{min-height:0}
  .folder-tab{padding:0 18px 0 12px;width:calc(20% + 18px);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%);border-radius:4px 4px 0 0;font-size:9px;line-height:18px;letter-spacing:-.045em}
  .folder-label-long{display:none}
  .folder-label-short{display:block}
  .folder-index{right:16px;gap:15px;font-size:9px}
  .folder-index>span{display:none}
  .folder-index>a{padding-block:6px}
  .folder-body{padding:0 16px 13px}
  .work-section .project-heading{grid-template-columns:minmax(0,1fr);gap:15px;padding:23px 0 16px}
  .work-section .project-heading h3{font-size:clamp(26px,6.8vw,36px);line-height:1.22;letter-spacing:-.065em}
  .work-section .project-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:end}
  .work-section .project-meta>span:first-child{grid-column:1;grid-row:1;font-size:8px;line-height:15px}
  .work-section .project-meta>span:nth-child(2){grid-column:1;grid-row:2;font-size:10px;line-height:17px}
  .work-section .view-project{grid-column:2;grid-row:1/3;align-self:end;margin:0;padding:0;font-size:9px;line-height:20px;gap:10px;white-space:nowrap}
  .work-section .view-project span{font-size:18px}
  .work-section .project-description{min-height:42px;margin:0 -16px 16px;padding:8px 16px}
  .work-section .project-description p{font-size:10px;line-height:19px}
  .work-section .project-image{height:100%;min-height:0;max-height:none}
  .work-section .bloom-cover-word{left:6%;top:7%;font-size:clamp(32px,9vw,45px)}
  .work-section .cover-card{width:43%;max-height:67%;max-width:none}
  .work-section .cover-card-one{left:7%;bottom:5%;top:auto}
  .work-section .cover-card-two{right:5%;top:31%}
  .work-section .travel-cover-title{font-size:clamp(40px,11vw,64px);left:7%;top:8%}
  .work-section .travel-cover>img{object-position:57% center}
  .work-section .town-cover-title{font-family:var(--sans);font-size:clamp(43px,13vw,65px);top:10%;left:7%;line-height:1.15}
  .work-section .town-cover-title small{font-size:8px;line-height:19px;margin-top:14px}
  .work-section .image-corner{font-size:7px;line-height:15px;right:12px;bottom:12px}
  .work-section .collection-cover{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
  .work-section .project-image-note{min-height:26px;padding-top:9px;font-size:6px;line-height:13px;gap:12px}
  .work-section .project-image-note>span:last-child{font-size:7px;line-height:13px}
  .work-section>.work-end{padding:22px 16px;min-height:64px;font-size:7px;line-height:17px}
}
@media(max-height:680px) and (min-width:701px){
  .work-section>.project{min-height:0}
  .work-section .project-heading{padding-top:18px;padding-bottom:14px}
  .work-section .project-heading h3{font-size:clamp(29px,3vw,40px)}
  .work-section .project-description{margin-bottom:18px;min-height:40px;padding-block:7px}
  .work-section .view-project{margin-top:12px}
  .folder-body{padding-bottom:12px}
  .work-section .project-image-note{padding-top:8px;min-height:24px}
}
@media(max-height:620px) and (max-width:700px){
  .work-section>.project{min-height:0}
  .work-section .project-heading{padding-top:17px;gap:10px;padding-bottom:12px}
  .work-section .project-heading h3{font-size:25px}
  .work-section .project-description{margin-bottom:12px}
}