/* Full text stays in the layout while selected phrases are revealed. */
.typewriter-wrap { display:inline-block; position:relative; vertical-align:top; max-width:100%; --typing-cursor:0; --typing-position:0px; }
.typewriter-visual { display:block; }
.typewriter-wrap::after { content:''; position:absolute; left:var(--typing-position); top:.1em; width:2px; height:.85em; background:currentColor; opacity:var(--typing-cursor); pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .typewriter-wrap::after { display:none; } }
.motion-reduced .typewriter-wrap::after { display:none; }

/* No text duplication or reflow: line bands only change the visibility of native prose. */
.body-line-reveal { mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
.motion-reduced .body-line-reveal { mask-image:none !important; -webkit-mask-image:none !important; }
@media(prefers-reduced-motion:reduce) { .body-line-reveal { mask-image:none !important; -webkit-mask-image:none !important; } }

/* The hero types in words on load, resolving from a soft blur. */
.hero-title-word { display:inline-block; }

/* Independent transform properties keep hover depth separate from entrance motion. */
.works-collage,.media-stack,.shoutouts-people,.shoutouts-second-row,.shoutouts-third-row,.shoutouts-initiatives { perspective:1000px; }
.depth-card { rotate:var(--tilt-x,1) var(--tilt-y,0) 0 var(--tilt-angle,0deg); translate:0 0 var(--hover-depth,0px); scale:var(--hover-scale,1); position:relative; }
/* GSAP normalizes individual transforms inline during scroll entrances.
   Keep pointer tilt independent while its transform handles the arrival. */
.shoutout-card.depth-card,.shoutout-logo.depth-card {
 rotate:var(--tilt-x,1) var(--tilt-y,0) 0 var(--tilt-angle,0deg) !important;
 translate:0 0 var(--hover-depth,0px) !important;
 scale:var(--hover-scale,1) !important;
}
.work-item-link { position:absolute; inset:0; z-index:5; }
.work-item-link:focus-visible { outline:3px solid var(--ink); outline-offset:-4px; border-radius:4px; }
@media(prefers-reduced-motion:no-preference) {
 .works-collage .depth-card { animation:work-float 5.8s ease-in-out infinite; }
 .television-slot.depth-card { animation-delay:-1.4s; }
 .browser-slot.depth-card { animation-delay:-3.1s; }
 .collective-sheet.depth-card { animation-delay:-4.4s; }
}
@keyframes work-float { 0%,100% { translate:0 calc(-1 * var(--hover-lift,0px)) var(--hover-depth,0px); } 50% { translate:0 calc(-4px - var(--hover-lift,0px)) var(--hover-depth,0px); } }
.shoutout-photo::after,.shoutout-logo::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#ffffff38,transparent 65%); opacity:var(--shine-opacity,0); transition:opacity .25s; }
.shoutout-photo::after { mask-image:var(--portrait-mask); mask-size:cover; mask-position:center; }
.motion-reduced .depth-card { animation:none; rotate:none !important; translate:none !important; scale:1 !important; }
@media(prefers-reduced-motion:reduce) { .depth-card { animation:none; rotate:none !important; translate:none !important; scale:1 !important; } }

.current-projects { position:absolute; top:10px; left:5%; right:5%; display:flex; justify-content:center; align-items:start; gap:34px; z-index:3; }
.project-badge { display:flex; flex-direction:column; gap:10px; align-items:center; width:140px; text-decoration:none; color:var(--lime); font-size:15px; font-weight:600; text-align:center; }
.project-badge img { width:112px; height:112px; object-fit:cover; border-radius:12px; box-shadow:0 5px 14px #0003; transition:scale .35s ease; }
.project-badge:hover img,.project-badge:focus-visible img { scale:1.08; }
.project-badge:hover { color:var(--lime); }
.project-badge span { background:var(--ink); padding:5px 8px; border-radius:5px; }
@media(prefers-reduced-motion:no-preference) { .project-badge { animation:project-float 7s ease-in-out infinite; }.podcast-badge { animation-delay:-3.5s; } }
@keyframes project-float { 50% { translate:0 -6px; } }
.project-mention { position:relative; font-weight:700; text-decoration-thickness:2px; }
.project-preview { position:absolute; bottom:calc(100% + 12px); left:50%; translate:-50% 0; width:140px; padding:6px; background:white; border-radius:8px; box-shadow:0 6px 20px #0003; opacity:0; visibility:hidden; pointer-events:none; z-index:10; transition:opacity .2s; }
.project-preview img { display:block; width:100%; height:auto; border-radius:3px; }
.project-mention:hover .project-preview,.project-mention:focus-visible .project-preview { opacity:1; visibility:visible; }
.dezod-feature { display:flex; align-items:center; gap:28px; max-width:680px; margin:0 0 44px; padding:16px; border:1px solid #254f4b33; background:#fff8; color:var(--ink); text-decoration:none; border-radius:4px; }
.dezod-feature img { width:260px; max-width:45%; height:auto; }
.dezod-feature small { display:block; font-size:14px; margin-bottom:8px; }
.dezod-feature strong { font-size:21px; line-height:1.3; display:block; }
.dezod-feature:hover { color:var(--ink); background:white; }
@media(max-width:575px) { .current-projects { top:-5px; gap:18px; }.project-badge { width:120px; font-size:13px; }.project-badge img { width:86px; height:86px; }.dezod-feature { gap:16px; }.dezod-feature strong { font-size:17px; }.dezod-feature small { font-size:12px; } }
@media(hover:none) { .project-preview { display:none; } }
@media(prefers-reduced-motion:reduce) { .project-badge { animation:none; }.project-badge img { transition:none; } }
.motion-reduced .project-badge { animation:none; }
/* Keep the featured covers above the head as the layout stacks. */
@media(max-width:991px) { .reflection-visual { height:650px; } }
@media(max-width:575px) { .reflection-visual { height:450px; } }

/* Supplied line-art bubble keeps its original proportions and points into the head. */
.reflection-visual { container-type:inline-size; }
.reflection-bubble.current-projects { top:auto; bottom:calc(77.036cqw - 75px); left:0; right:0; width:100%; max-width:575px; margin-inline:auto; aspect-ratio:575/426; gap:18px; padding:18% 10% 0; background:none; filter:none; }
.reflection-bubble .project-badge { color:var(--lime); }
.reflection-bubble .project-badge span { background:transparent; color:var(--lime); padding:2px 0; white-space:nowrap; font-size:14px; }
.reflection-bubble .project-badge:hover { color:var(--lime); }
.reflection-bubble .project-badge:focus-visible { outline-color:var(--lime); }
@media(max-width:991px) { .reflection-visual { height:auto; aspect-ratio:575/850; margin-top:55px; } }
@media(max-width:575px) {
 .reflection-bubble.current-projects { top:auto; bottom:calc(77.036cqw - 40px); left:0; right:0; gap:12px; padding:18% 8% 0; }
 .reflection-bubble .project-badge span { font-size:12px; }
}
@media(max-width:360px) {
 .reflection-bubble .project-badge { width:100px; }
 .reflection-bubble .project-badge img { width:70px; height:70px; }
 .reflection-bubble .project-badge span { font-size:10px; }
}

.bubble-trim-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.reflection-bubble { isolation:isolate; }

/* Current-project labels use the site body font, with gentle visual tilts. */
.reflection-bubble .project-badge span { font-family:inherit; font-weight:500; line-height:1.3; }
.reflection-bubble .substack-badge { rotate:-3deg; }
.reflection-bubble .podcast-badge { rotate:2.5deg; }
.reflection-bubble .project-badge span { white-space:normal; max-width:100%; text-wrap:balance; }

/* The current project leads Expériences; its history follows underneath. */
.dezod-feature { max-width:none; padding:28px; gap:36px; align-items:center; }
.dezod-logo-link { display:block; width:260px; max-width:34%; flex-shrink:0; }
.dezod-feature .dezod-logo-link img { width:100%; max-width:100%; display:block; }
.dezod-feature-copy p { font-size:var(--body-size); line-height:var(--body-leading); font-weight:500; margin:0; }
.dezod-feature-copy a { font-weight:700; }
.dezod-feature-copy small { font-family:'Pixelify Sans',sans-serif; font-size:20px; margin-bottom:12px; }
.external-link-icon { display:inline-block; width:.9em; height:.9em; vertical-align:-.08em; margin-left:.18em; }
.menu-icon svg { display:block; width:16px; height:16px; transition:rotate .2s ease; }
.menu-icon.is-open svg { rotate:45deg; }
@media(max-width:575px) { .dezod-feature { flex-direction:column; align-items:flex-start; gap:20px; padding:22px; }.dezod-logo-link { width:220px; max-width:100%; } }

.footer-arrival-slot { display:flow-root; }
.footer-arrival-slot:focus-within .site-footer { transform:none !important; opacity:1 !important; }