/* A spread of story cards, with a quiet lift on interaction. */
.earlier-work .earlier-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:0;padding:2rem .75rem 3rem;isolation:isolate; }
.earlier-work .earlier-grid article { --card-turn:-5deg;--card-drop:1rem;display:flex;flex-direction:column;align-items:stretch;gap:.75rem;min-height:29rem;padding:16rem 1.4rem 1.6rem;border:1px solid #342e2518;border-radius:1.1rem;background:#faf8f3;overflow:hidden;position:relative;transform:translateY(var(--card-drop)) rotate(var(--card-turn));transform-origin:50% 85%;box-shadow:0 8px 20px #342e2512;transition:transform .35s ease,box-shadow .35s ease; }
.earlier-work .earlier-grid article + article { margin-left:-.65rem; }
.earlier-work .earlier-grid article:nth-child(2) { --card-turn:-1.8deg;--card-drop:0rem; }
.earlier-work .earlier-grid article:nth-child(3) { --card-turn:1.8deg;--card-drop:0rem; }
.earlier-work .earlier-grid article:nth-child(4) { --card-turn:5deg;--card-drop:1rem; }
.earlier-work .earlier-grid article:hover,.earlier-work .earlier-grid article:focus-within { z-index:5;transform:translateY(-.8rem) rotate(0deg);box-shadow:0 20px 38px #342e2525; }
.earlier-work .earlier-grid article > :is(span,p),.earlier-work .earlier-grid article:hover > :is(span,p),.earlier-work .earlier-grid article:focus-within > :is(span,p) { opacity:1; }
.earlier-work .earlier-grid article > span { font-size:.65rem;letter-spacing:.08em;color:#625b66; }
.earlier-work .earlier-grid h3 { position:static;z-index:auto;width:auto;max-width:100%;font-size:clamp(1.6rem,2.4vw,2.35rem);line-height:1.04; }
.earlier-work .earlier-grid h3 a::after { inset:0;z-index:6; }
.earlier-work .earlier-grid h3 a:focus-visible { outline:none; }
.earlier-work .earlier-grid article:focus-within { outline:3px solid #7540b0;outline-offset:4px; }
.earlier-work .earlier-grid article > p { font-size:.95rem;line-height:1.5; }
.earlier-work .earlier-grid .beyond-preview { inset:0 0 auto;height:14.5rem;opacity:1;border-bottom:1px solid #342e2510; }
.earlier-work .earlier-grid .beyond-preview::after { display:none; }
.earlier-work .earlier-grid .beyond-preview * { animation-play-state:paused; }
.earlier-work .earlier-grid article:hover .beyond-preview *, .earlier-work .earlier-grid article:focus-within .beyond-preview * { animation-play-state:running; }
.earlier-work .earlier-grid .beyond-preview-luca .ll-pendant { right:auto;left:50%;top:-7rem;width:16rem;height:28rem;transform:translateX(-50%); }
.earlier-work .earlier-grid .beyond-preview-yubl .yubl-hero-art { width:65%;right:17.5%;top:50%;transform:translateY(-50%) rotate(-7deg); }
.earlier-work .earlier-grid .beyond-preview-yubl .yubl-canvas-type { font-size:7rem; }
.earlier-work .earlier-grid .beyond-preview-arthouse .beyond-logo { width:80%;right:10%;top:50%;border-width:4px; }
.earlier-work .earlier-grid .beyond-plugin-text { left:10%;right:10%;top:50%;font-size:clamp(1.45rem,2vw,2rem);padding:.8rem; }
@media(max-width:1050px) {
 .earlier-work .earlier-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;padding:1rem 0 2rem; }
 .earlier-work .earlier-grid article { --card-turn:-2deg;--card-drop:0rem;min-height:28rem; }
 .earlier-work .earlier-grid article + article { margin-left:0; }
 .earlier-work .earlier-grid article:nth-child(even) { --card-turn:2deg;--card-drop:0rem; }
 .earlier-work .earlier-grid article:nth-child(3) { --card-turn:-2deg; }
}
@media(max-width:560px) {
 .earlier-work .earlier-grid { grid-template-columns:1fr;gap:1.5rem;padding-inline:.3rem; }
 .earlier-work .earlier-grid article { transform:none;min-height:27rem; }
 .earlier-work .earlier-grid h3 { font-size:2rem; }
 .earlier-work .earlier-grid .beyond-preview-yubl .yubl-hero-art { width:12rem;right:calc(50% - 6rem); }
 .earlier-work .earlier-grid .beyond-preview-arthouse .beyond-logo { width:16rem;right:calc(50% - 8rem); }
 .earlier-work .earlier-grid .beyond-plugin-text { left:15%;right:15%;font-size:2rem; }
}
@media(prefers-reduced-motion:reduce) {
 .earlier-work .earlier-grid article { transition:none;transform:none; }
 .earlier-work .earlier-grid article:hover,.earlier-work .earlier-grid article:focus-within { transform:none; }
 .earlier-work .earlier-grid .beyond-preview * { animation:none!important; }
}

/* Story-specific illustration motion, triggered only by the active card. */
@media(prefers-reduced-motion:no-preference) {
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .yubl-heart { animation:yubl-press 2.4s ease-in-out infinite;translate:0 0;scale:1; }
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .yubl-pin { animation:yubl-press 2.4s ease-in-out 1.2s infinite; }
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .yubl-heart-stream { display:block; }
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .beyond-plugin-text { animation:beyond-selection 2.8s ease-in-out infinite; }
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .beyond-preview-arthouse .beyond-logo { animation:beyond-projector 3.2s linear infinite; }
 .earlier-work .earlier-grid article:is(:hover,:focus-within) .beyond-preview-arthouse::before { content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#fff9 48%,transparent 75%);animation:beyond-projector-beam 2.8s ease-in-out infinite;pointer-events:none; }
}
@keyframes beyond-selection {
 0%,100% { box-shadow:0 0 0 0 #9664df00; }
 50% { box-shadow:0 0 0 5px #9664df22; }
}
@keyframes beyond-projector {
 0%,100% { filter:brightness(1); }
 25% {filter:brightness(1.12);}
 28% {filter:brightness(.96);}
 31% {filter:brightness(1.08);}
 50% {filter:brightness(1);}
 76% {filter:brightness(1.1);}
 80% {filter:brightness(.97);}
}
@keyframes beyond-projector-beam { 0%,100% {opacity:.15;transform:translateX(-35%)} 50% {opacity:.65;transform:translateX(35%)} }

.pile-open,.pile-controls,.pile-details { display:none; }
@media(max-width:760px) {
 .earlier-work .earlier-grid.mobile-pile { display:block;position:relative;height:21rem;margin:0 0 1rem;padding:0;touch-action:pan-y; }
 .earlier-work .mobile-pile article,
 .earlier-work .mobile-pile article:hover,
 .earlier-work .mobile-pile article:focus-within { position:absolute;inset:0;display:block;min-height:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;z-index:calc(4 - var(--pile-position));transform:translate(var(--pile-x),calc(var(--pile-position) * -7px)) rotate(var(--pile-angle)) scale(calc(1 - var(--pile-position) * .045));transform-origin:50% 75%;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s; }
 .earlier-work .mobile-pile article.pile-front { transform:translateX(var(--pile-drag,0px)) rotate(0deg); }
 .earlier-work .mobile-pile.is-dragging article.pile-front { transition:none; }
 .earlier-work .mobile-pile article:not(.pile-front) { pointer-events:none;opacity:1; }
 .earlier-work .mobile-pile article > :is(span,h3,p) { display:none; }
 .earlier-work .mobile-pile .beyond-preview { inset:0;height:100%;border:1px solid #342e2510;border-radius:1rem;background:#faf8f3;overflow:hidden;filter:drop-shadow(0 10px 9px #342e2518); }
 .earlier-work .mobile-pile .beyond-preview-luca { background:#f3e7cf; }
 .earlier-work .mobile-pile .beyond-preview-plugin { background:#eee8f6; }
 .earlier-work .mobile-pile .beyond-preview-yubl { background:#f7e8b8; }
 .earlier-work .mobile-pile .beyond-preview-arthouse { background:#e8e3dc; }
 .earlier-work .mobile-pile article:not(.pile-front) .beyond-preview { overflow:hidden; }
 .earlier-work .mobile-pile .beyond-preview::before { display:none; }
 .earlier-work .mobile-pile .pile-front .beyond-preview * { animation-play-state:running; }
 .earlier-work .mobile-pile .beyond-preview-luca .ll-pendant { top:-4rem;height:27rem;width:15rem; }
 .earlier-work .mobile-pile .beyond-plugin-text { left:8%;right:8%;font-size:1.7rem;background:#f6f1e7;padding:1rem; }
 .earlier-work .mobile-pile .beyond-preview-yubl .yubl-hero-art { width:12rem;right:calc(50% - 6rem); }
 .earlier-work .mobile-pile .beyond-preview-arthouse .beyond-logo { width:85%;right:7.5%; }
 .earlier-work .mobile-pile .pile-open { display:block;position:absolute;inset:0;z-index:8;cursor:grab; }
 .earlier-work .mobile-pile .pile-open:active { cursor:grabbing; }
 .earlier-work .mobile-pile .pile-open:focus-visible { outline:2px solid #7540b0;outline-offset:4px;border-radius:50%; }
 .pile-controls { display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1.5rem; }
 .pile-controls button { width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:1.3rem;cursor:pointer; }
 .pile-controls button:focus-visible { outline:2px solid #7540b0;outline-offset:3px; }
 .pile-status { font-size:.72rem;color:#625b66; }
 .pile-details { display:block;min-height:12rem; }
 .pile-details > span { font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#625b66; }
 .pile-details h3 { font-size:2rem;line-height:1.1;margin:.6rem 0 .8rem;letter-spacing:-.045em; }
 .pile-details h3 a { text-decoration:none; }
 .pile-details h3 a::after { content:' ↗';font-size:1.2rem; }
 .pile-details p { font-size:.95rem;line-height:1.5;max-width:30rem; }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
 .earlier-work .mobile-pile article { transition:none; }
}

/* Mobile stories travel as complete cards, with navigation below the pile. */
@media(max-width:760px) {
 /* Rotated back cards may peek into the gutter without widening the page. */
 .portfolio-home .earlier-work { overflow-x:clip; }
 .earlier-work .earlier-grid.mobile-pile { height:28rem;margin-bottom:1.5rem; }
 .earlier-work .mobile-pile article,
 .earlier-work .mobile-pile article:hover,
 .earlier-work .mobile-pile article:focus-within { display:flex;flex-direction:column;align-items:stretch;gap:0;padding:14rem 1.4rem 1.4rem;border:1px solid #342e2510;border-radius:1rem;background:#f3e7cf;box-shadow:0 10px 18px #342e2518;overflow:hidden; }
 .earlier-work .mobile-pile article:nth-child(2) { background:#eee8f6; }
 .earlier-work .mobile-pile article:nth-child(3) { background:#f7e8b8; }
 .earlier-work .mobile-pile article:nth-child(4) { background:#e8e3dc; }
 .earlier-work .mobile-pile article > :is(span,h3,p) { display:block;opacity:1; }
 .earlier-work .mobile-pile article > span { margin:0;font-size:.65rem; }
 .earlier-work .mobile-pile article > h3 { width:auto;font-size:2rem;line-height:1.1;margin:.6rem 0 .8rem; }
 .earlier-work .mobile-pile article > p { font-size:.95rem;line-height:1.5;margin:0; }
 .earlier-work .mobile-pile .beyond-preview { height:13rem;inset:0 0 auto;border:0;border-radius:0;filter:none; }
 .earlier-work .mobile-pile .beyond-preview-luca .ll-pendant { top:-8rem; }
 .earlier-work .mobile-pile .beyond-preview-yubl .yubl-hero-art { width:10rem;right:calc(50% - 5rem); }
 .earlier-work .mobile-pile .beyond-preview-arthouse .beyond-logo { width:75%;right:12.5%; }
 .earlier-work .mobile-pile .beyond-plugin-text { font-size:1.4rem; }
 .earlier-work .mobile-pile .pile-open:focus-visible { border-radius:1rem;outline-offset:-4px; }
}

/* Touch tablets cannot hover to open the fan: gently spread it on entry. */
@media (min-width:761px) and (max-width:1366px) and (orientation:landscape) and (prefers-reduced-motion:no-preference) {
 .earlier-work .earlier-grid article { --spread-x:0px;transform:translate(var(--spread-x),var(--card-drop)) rotate(var(--card-turn));transition:transform .8s cubic-bezier(.22,1,.36,1),box-shadow .35s ease; }
 .earlier-work .earlier-grid.is-in-view article:nth-child(1) { --spread-x:-18px; }
 .earlier-work .earlier-grid.is-in-view article:nth-child(2) { --spread-x:-6px; }
 .earlier-work .earlier-grid.is-in-view article:nth-child(3) { --spread-x:6px; }
 .earlier-work .earlier-grid.is-in-view article:nth-child(4) { --spread-x:18px; }
 .earlier-work .earlier-grid article:hover,
 .earlier-work .earlier-grid article:focus-within { transform:translate(var(--spread-x),-.8rem) rotate(0deg); }
}
@media (min-width:761px) and (max-width:1050px) and (orientation:landscape) and (prefers-reduced-motion:no-preference) {
 .earlier-work .earlier-grid.is-in-view article:nth-child(odd) { --spread-x:-8px; }
 .earlier-work .earlier-grid.is-in-view article:nth-child(even) { --spread-x:8px; }
}