.artdeco-project-card{--preview-bg:#181818;--preview-text:#f4f4f4;--preview-muted:#c6c6c6;--preview-tag:#505050;perspective:1100px}
.artdeco-flip-scene{aspect-ratio:3/4;position:relative;perspective:1100px}
.artdeco-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.25,1)}
.artdeco-project-card.is-flipped .artdeco-flip-inner{transform:rotateY(-180deg) translateZ(8px)}
.artdeco-flip-front,.artdeco-flip-back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.artdeco-flip-front{display:flex;align-items:center;justify-content:center;background:#2e2834}
.artdeco-flip-front img{display:block;width:100%;height:100%;object-fit:contain}
.artdeco-flip-back{transform:rotateY(180deg);background:var(--preview-bg);color:var(--preview-text);padding:clamp(16px,1.7vw,26px);overflow:auto;border:1px solid transparent}
.artdeco-flip-back[hidden]{display:none}
.artdeco-flip-back .artdeco-back-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--preview-muted);margin:0 0 12px}
.artdeco-flip-back h4{font-size:17px;line-height:1.2;margin:12px 0 5px}
.artdeco-flip-back p{font-size:14px;line-height:1.45;margin:0;color:var(--preview-muted)}
.artdeco-back-link{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:14px;color:var(--preview-text);font-weight:700;text-underline-offset:4px;font-size:14px}
.artdeco-project-card .project-entry-copy{gap:14px;padding-top:24px}
.artdeco-project-card .project-entry-copy h3{font-size:clamp(26px,2.7vw,40px)}
.artdeco-project-card h3 a{color:inherit;text-decoration:none}
.artdeco-project-card .project-entry-copy>p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.artdeco-preview-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.artdeco-preview-tags li{border:1px solid var(--preview-tag);border-radius:999px;padding:7px 12px;font-size:13px;line-height:1.4;color:var(--muted)}
.artdeco-preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.artdeco-flip-toggle{font:inherit;font-size:13px;line-height:1.4;min-height:44px;padding:10px 0;color:var(--ink);background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.artdeco-flip-toggle[hidden]{display:none}
.artdeco-project-card a:focus-visible,.artdeco-flip-toggle:focus-visible{outline:3px solid #a0a0a0;outline-offset:4px}
:root[data-theme=light] .artdeco-project-card{--preview-bg:#f2f2f2;--preview-text:#282828;--preview-muted:#606060;--preview-tag:#b5b5b5}
:root[data-theme=light] .artdeco-back-link{color:var(--preview-text)}
:root[data-theme=light] .artdeco-project-card a:focus-visible,:root[data-theme=light] .artdeco-flip-toggle:focus-visible{outline-color:#606060}
@media(max-width:600px){.artdeco-flip-scene{aspect-ratio:3/4}.artdeco-flip-back{padding:24px}.artdeco-flip-back h4{font-size:22px;margin-top:20px}.artdeco-flip-back p{font-size:16px}.artdeco-project-card .project-entry-copy>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.artdeco-flip-inner{transition:none}.artdeco-project-card.is-flipped .artdeco-flip-inner{transform:none}.artdeco-flip-back{transform:none}.artdeco-project-card.is-flipped .artdeco-flip-front{visibility:hidden}}

/* Restore the original portrait size and use a quiet project link. */
.artdeco-project-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--muted);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.artdeco-project-link:hover{color:var(--ink)}

/* Outlined project button, requested by Veronika. */
.artdeco-project-link{justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--muted);border-radius:999px;background:transparent;color:var(--muted);text-decoration:none;line-height:1.4}
.artdeco-project-link:hover,.artdeco-project-link:active{border-color:var(--ink);color:var(--ink);background:transparent}

/* Full reverse face opens the case; resting cover has no navigation. */
.artdeco-flip-back .artdeco-back-link{position:static}
.artdeco-flip-back .artdeco-back-link::after{content:"";position:absolute;inset:0;border-radius:24px;cursor:pointer}
.artdeco-flip-back .artdeco-back-link:focus-visible::after{outline:3px solid #808080;outline-offset:-4px}

/* A single flip with a soft overshoot and return, on the same axis. */
.artdeco-project-card.is-flipped .artdeco-flip-inner{animation:artdeco-flip-settle 1.1s both;transform:rotateY(-180deg)}
@keyframes artdeco-flip-settle{
 0%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.22,.6,.3,1)}
 64%{transform:rotateY(-185deg);animation-timing-function:ease-in-out}
 82%{transform:rotateY(-178deg);animation-timing-function:ease-in-out}
 94%{transform:rotateY(-180.6deg);animation-timing-function:ease-in-out}
 100%{transform:rotateY(-180deg)}
}
@media(prefers-reduced-motion:reduce){.artdeco-project-card.is-flipped .artdeco-flip-inner{animation:none;transform:none}}

/* Editorial reverse face with three concrete parts of the case. */
.artdeco-flip-back{background:#181818;padding:20px;border-color:transparent;}
.artdeco-flip-back .artdeco-back-label{color:var(--preview-muted);font-size:11px;margin-bottom:12px}
.artdeco-flip-back .artdeco-back-headline{font-size:28px;line-height:1.05;font-weight:750;letter-spacing:-.04em;color:var(--preview-text);margin:0 0 18px}
.artdeco-back-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin:0 0 13px}
.artdeco-back-step>span{font-size:11px;color:var(--preview-muted);padding-top:2px}
.artdeco-back-step h4{font-size:15px;line-height:1.2;margin:0 0 4px}
.artdeco-back-step p{font-size:13px;line-height:1.45}
.artdeco-back-step .artdeco-metric-note{font-size:11px;line-height:1.4;margin-top:5px}
.artdeco-flip-back .artdeco-back-link{margin-top:0;width:100%;justify-content:space-between;border-top:1px solid var(--preview-tag);padding-top:10px}
:root[data-theme=light] .artdeco-flip-back{background:#f2f2f2;border-color:transparent;}
:root[data-theme=light] .artdeco-flip-back .artdeco-back-headline{color:var(--preview-text)}
:root[data-theme=light] .artdeco-flip-back .artdeco-back-label,:root[data-theme=light] .artdeco-back-step>span{color:var(--preview-muted)}
@media(max-width:600px){.artdeco-flip-back{padding:24px}.artdeco-flip-back .artdeco-back-headline{font-size:34px}.artdeco-back-step{margin-bottom:18px}.artdeco-back-step h4{font-size:18px}.artdeco-back-step p{font-size:15px}.artdeco-back-step .artdeco-metric-note{font-size:12px}}

/* Match the opening flip when returning to the cover. */
.artdeco-project-card.is-returning .artdeco-flip-inner{animation:artdeco-flip-return 1.1s both}
@keyframes artdeco-flip-return{
 0%{transform:rotateY(-180deg);animation-timing-function:cubic-bezier(.22,.6,.3,1)}
 64%{transform:rotateY(5deg);animation-timing-function:ease-in-out}
 82%{transform:rotateY(-2deg);animation-timing-function:ease-in-out}
 94%{transform:rotateY(.6deg);animation-timing-function:ease-in-out}
 100%{transform:rotateY(0deg)}
}
@media(prefers-reduced-motion:reduce){.artdeco-project-card.is-returning .artdeco-flip-inner{animation:none;transform:none}}

/* The whole reverse face is the link; no visible footer row. */
.artdeco-flip-back .artdeco-back-link{display:block;width:0;height:0;min-height:0;margin:0;padding:0;border:0;font-size:0;line-height:0}

.artdeco-flip-scene{transition:transform .3s ease-out}
.preview-metrics{margin:24px 0 0;padding:0;color:var(--preview-text)}
.artdeco-flip-back .preview-metrics h4{font-size:16px;margin:0 0 12px;color:var(--preview-text)}
.preview-metrics-grid{display:flex;flex-wrap:wrap;gap:10px}
.preview-metric{display:flex;flex:1 1 120px;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--preview-muted);border-radius:24px;background:transparent;color:var(--preview-text)}
.preview-metric strong{font-size:clamp(24px,2.6vw,38px);line-height:1.12;font-weight:700;letter-spacing:-.035em}
.preview-metric span{font-size:13px;line-height:1.4;color:var(--preview-muted)}
.artdeco-flip-back .preview-metrics-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--preview-muted)}
@media(prefers-reduced-motion:reduce){.artdeco-flip-scene{transition:none;transform:none!important}}

/* The brand banner acts as a link, with a subtle press instead of a flip. */
.letoile-brand-teaser .banner-press-link{display:block;position:relative;border-radius:24px;overflow:hidden;cursor:pointer;transform:scale(1);transform-origin:center;transition:transform .18s ease,filter .18s ease}
.letoile-brand-teaser .banner-press-link img{display:block;width:100%;height:100%;object-fit:contain}
@media(hover:hover){.letoile-brand-teaser .banner-press-link:hover{transform:scale(.992);filter:brightness(.96)}}
.letoile-brand-teaser .banner-press-link:active{transform:scale(.984);filter:brightness(.92)}
.letoile-brand-teaser .banner-press-link:focus-visible{outline:3px solid #b397ff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.letoile-brand-teaser .banner-press-link{transition:none}.letoile-brand-teaser .banner-press-link:hover,.letoile-brand-teaser .banner-press-link:active{transform:none}}
