/* The existing code / paper cover unfolds into four real projects. */
.journal-code-page { overflow: visible; }
.vibe-cover { display: contents; }
.vibe-projects {
  position: absolute; inset: -3% -3% -2% -2%; display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 32px); background: #eeece4; color: #151715;
  border-left: 7px solid #151715; box-shadow: 9px 11px 0 #15171540;
  opacity: 0; visibility: hidden; transform-origin: left center;
}
.vibe-projects-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid #151715; }
.vibe-projects-head > div > span { display: block; margin-bottom: 9px; color: #62665f; font: 8px var(--mono); letter-spacing: .07em; }
.vibe-projects-head h3 { font-size: clamp(20px, 2.1vw, 31px); font-weight: 850; line-height: 1.1; letter-spacing: -.07em; white-space: nowrap; }
.vibe-projects-head h3 > span { color: #df432f; }
.vibe-project-count { color: #df432f; font: 34px/.9 var(--display); }
.vibe-project-count > span { display: block; color: #62665f; font: 6px/1.5 var(--mono); margin-top: 5px; }
.vibe-project-list { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; }
.vibe-project-list > li { min-height: 0; display: flex; border-bottom: 1px solid #15171535; }
.vibe-project-list a { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; align-items: center; gap: 13px; width: 100%; padding: 6px 0; isolation: isolate; }
.vibe-project-list a::before { position: absolute; content: ''; inset: 3px -12px; background: #df432f; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.vibe-project-symbol { color: #df432f; display: block; transition: color .25s, transform .4s; }
.vibe-project-symbol svg { display: block; width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; }
.vibe-symbol-point { fill: currentColor; stroke: none; }
.vibe-project-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.vibe-project-copy strong { font-size: clamp(15px, 1.25vw, 19px); letter-spacing: -.03em; font-weight: 760; line-height: 1.2; }
.vibe-project-copy > span { color: #62665f; font-size: clamp(9px, .83vw, 12px); line-height: 1.5; }
.vibe-project-arrow { font: 24px/1 Arial,sans-serif; transition: transform .3s; }
.vibe-project-list a:hover::before, .vibe-project-list a:focus-visible::before { transform: scaleX(1); }
.vibe-project-list a:hover .vibe-project-symbol, .vibe-project-list a:focus-visible .vibe-project-symbol { color: #eeece4; transform: rotate(-8deg); }
.vibe-project-list a:hover .vibe-project-copy > span, .vibe-project-list a:focus-visible .vibe-project-copy > span { color: #151715; }
.vibe-project-list a:hover .vibe-project-arrow { transform: translate(3px,-3px); }
.vibe-project-list a:focus-visible { outline: 2px solid #151715; outline-offset: 4px; }
.vibe-projects-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 8px; color: #62665f; }
.vibe-replay { padding: 6px 0; font-size: inherit; color: #151715; }
.vibe-replay span { margin-left: 7px; font-size: 13px; }
.vibe-replay:hover { color: #df432f; }
.vibe-show-projects .vibe-cover > * { opacity: 0; visibility: hidden; }
.vibe-show-projects .vibe-projects { opacity: 1; visibility: visible; }
.vibe-unfolding .journal-editor { transform-origin: left center; animation: vibe-code-out 1s cubic-bezier(.2,.75,.2,1) both; }
.vibe-unfolding .journal-mini-site { transform-origin: right center; animation: vibe-paper-out 1s cubic-bezier(.2,.75,.2,1) both; }
.vibe-unfolding .vibe-projects { visibility: visible; animation: vibe-projects-in 1s cubic-bezier(.2,.75,.2,1) both; }
.vibe-unfolding .vibe-project-list li { animation: vibe-row-print .65s cubic-bezier(.2,.75,.2,1) both; }
.vibe-unfolding .vibe-project-list li:nth-child(1) { animation-delay: .24s; }
.vibe-unfolding .vibe-project-list li:nth-child(2) { animation-delay: .30s; }
.vibe-unfolding .vibe-project-list li:nth-child(3) { animation-delay: .36s; }
.vibe-unfolding .vibe-project-list li:nth-child(4) { animation-delay: .42s; }
@keyframes vibe-code-out { 0% { opacity: 1; transform: none; } 65%,100% { opacity: 0; transform: translate3d(-26%,0,-100px) rotateY(36deg); } }
@keyframes vibe-paper-out { 0% { opacity: 1; transform: rotateZ(1.2deg); } 30% { opacity: 1; transform: translate3d(4%,-2%,60px) rotateY(-18deg) rotateZ(0); } 75%,100% { opacity: 0; transform: translate3d(45%,0,0) rotateY(-76deg); } }
@keyframes vibe-projects-in { 0%,20% { opacity: 0; transform: translate3d(16%,0,-60px) rotateY(-14deg); clip-path: inset(0 0 0 100%); } 65% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes vibe-row-print { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.fc-book-landing .vibe-cover *, .fc-book-landing .vibe-projects * { animation: none !important; transition: none !important; }
@media (max-width: 1100px) { .vibe-projects { padding: 20px; } .vibe-project-list a { grid-template-columns: 29px minmax(0,1fr) 15px; gap: 10px; } .vibe-project-symbol svg { width: 28px; height: 28px; } .vibe-project-copy strong { font-size: 15px; } .vibe-project-copy > span { font-size: 9px; } }
@media (max-width: 600px) { .vibe-cover { grid-template-columns: 1.1fr .9fr; } .vibe-projects { padding: 14px 16px; border-left-width: 5px; box-shadow: 6px 7px 0 #15171540; } .vibe-projects-head { padding-bottom: 10px; } .vibe-projects-head > div > span { margin-bottom: 6px; font-size: 6px; } .vibe-projects-head h3 { font-size: 22px; } .vibe-project-count { font-size: 28px; } .vibe-project-list a { padding: 8px 0; grid-template-columns: 26px minmax(0,1fr) 16px; gap: 9px; } .vibe-project-symbol svg { width: 25px; height: 25px; } .vibe-project-copy { gap: 4px; } .vibe-project-copy strong { font-size: 14px; } .vibe-project-copy > span { font-size: 8px; } .vibe-project-arrow { font-size: 19px; } .vibe-projects-foot { font-size: 7px; margin-top: 6px; } }
@media (max-width: 600px) and (max-height: 760px) { .vibe-projects { inset: -3% -3% -2% -2%; padding: 10px 13px; } .vibe-projects-head { padding-bottom: 8px; } .vibe-projects-head h3 { font-size: 19px; } .vibe-projects-head > div > span { display: none; } .vibe-project-count { font-size: 24px; } .vibe-project-count > span { display: none; } .vibe-project-list a { padding: 6px 0; } .vibe-project-copy strong { font-size: 13px; } .vibe-project-copy > span { font-size: 8px; } .vibe-projects-foot { margin-top: 3px; } }
@media (prefers-reduced-motion: reduce) { .vibe-projects *, .vibe-cover * { animation: none !important; transition: none !important; } }