/* Editorial project covers. Visuals are labelled interaction / workflow studies;
   the existing display-open button owns the single accessible case-study action. */
.project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) .project-display {
  min-height: 0; aspect-ratio: auto; background: #0c0d0e;
}
.project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) .display-label {
  position: relative; inset: auto; padding: 18px 24px; gap: 12px; font-size: 9px; border-bottom: 1px solid #ffffff12;
}
.project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) .display-status { font-size: 10px; }
.project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) :is(.visual-note, .display-arrow) { display: none; }
.project-visual.cover-visual { position: relative; inset: auto; display: block; transform: none; background: #0c0d0e; }
.project-visual.cover-visual[hidden] { display: none !important; }
.project-cover { --cover-ink: #ad93ed; --cover-rgb: 173,147,237; position: relative; isolation: isolate; width: 100%; min-height: 390px; aspect-ratio: 1.85; overflow: hidden; text-align: left; background: radial-gradient(ellipse at 80% 55%, rgba(var(--cover-rgb),.12), transparent 53%), #0c0d0e; }
.project-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .24; background: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg,#ffffff0d 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg,transparent 15%,#000); }
.cover-copy { position: absolute; top: 14%; left: 6%; z-index: 2; width: 46%; pointer-events: none; }
.cover-eyebrow { display: block; color: #a3a19f; font: 8px/1.6 var(--mono); letter-spacing: 1.25px; }
.cover-title { display: block; margin: 17px 0 18px; color: #f3f1ed; font: 800 clamp(47px,5.7vw,86px)/.98 var(--sans); letter-spacing: -.065em; }
.cover-line { display: block; color: #c7c5c0; font: 400 clamp(15px,1.5vw,22px)/1.7 var(--sans); letter-spacing: .035em; }
.cover-scene { position: absolute; inset: 0 0 0 47%; pointer-events: none; }
.cover-scene::before { content: ''; position: absolute; width: 95%; aspect-ratio: 1; left: 6%; top: 10%; border: 1px solid rgba(var(--cover-rgb),.13); border-radius: 50%; transform: rotate(-24deg) scaleX(.72); }
.cover-cta { position: absolute; bottom: 10%; left: 6%; z-index: 3; display: flex; align-items: center; gap: 13px; max-width: 43%; pointer-events: none; }
.cover-cta-icon { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(var(--cover-rgb),.5); border-radius: 50%; background: rgba(var(--cover-rgb),.07); color: var(--cover-ink); font: 24px/1 var(--sans); transition: color .35s, background .35s, transform .35s; }
.cover-cta strong { display: block; color: #e5dfd7; font: 700 9px/1.5 var(--mono); letter-spacing: 1px; }
.cover-cta small { display: block; color: #a09a93; font: 10px/1.5 var(--sans); margin-top: 3px; }
.cover-caption { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 0; padding: 17px 24px; color: #9b9893; border-top: 1px solid #ffffff12; font: 8px/1.5 var(--mono); letter-spacing: .65px; }
.cover-caption > span:last-child { text-align: right; }
.cover-caption i { padding: 0 5px; color: #5d5a55; font-style: normal; }
.cover-object { transition: transform .7s cubic-bezier(.2,.7,.3,1), box-shadow .7s; }
.project-display:is(:hover,:focus-within) .cover-cta-icon { background: var(--cover-ink); color: #121313; transform: translate(2px,-2px); }
.cover-screen-tag { color: var(--cover-ink); font: 8px/1.5 var(--mono); letter-spacing: 1.4px; }

/* Timery: the assistant is a calm, deliberate path from a signal to an action. */
.cover--timery .cover-title { letter-spacing: -.055em; }
.cover-timery-phone { position: absolute; left: 22%; top: 10%; width: 54%; max-width: 236px; aspect-ratio: .57; padding: 7px; overflow: hidden; border: 1px solid #c2b6de58; border-radius: 25px; background: #17141d; transform: perspective(900px) rotateY(-14deg) rotateZ(-8deg); box-shadow: 20px 27px 58px #0009, -3px 0 24px #a18acc12; }
.cover-timery-screen { height: 100%; padding: 15px 14px 0; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 18px; background: linear-gradient(155deg,#25212e,#111115 70%); }
.cover-timery-brand { display: flex; align-items: center; gap: 7px; color: #e5ddf3; font: 700 13px var(--sans); letter-spacing: -.4px; }
.cover-timery-brand::before { content: ''; width: 15px; height: 20px; background: linear-gradient(135deg,#c5acff,#7955d7); border-radius: 4px 9px 4px 9px; transform: skewY(-24deg); }
.cover-timery-greeting { margin: 28px 0 6px; color: #e8e4ef; font: 600 clamp(17px,1.8vw,25px)/1.15 var(--sans); letter-spacing: -.8px; }
.cover-timery-sub { color: #a49aaa; font: 8px/1.6 var(--sans); }
.cover-timery-prompt { margin-top: 19px; padding: 11px 10px; color: #c9c1d6; background: #ffffff06; border: 1px solid #ffffff13; border-radius: 7px; font: 9px/1.6 var(--sans); }
.cover-timery-response { margin-top: 11px; padding: 12px 10px; background: #ab8ae70c; border: 1px solid #ac8fe633; border-radius: 7px; }
.cover-timery-response strong { display: block; margin: 7px 0 11px; color: #e2dbea; font: 500 10px/1.5 var(--sans); }
.cover-timery-slot { display: flex; justify-content: space-between; border-top: 1px solid #ffffff12; padding: 8px 0; color: #a9a0b6; font: 8px/1.3 var(--sans); }
.cover-timery-slot b { color: #d2c5e6; font-weight: 400; }
.cover-timery-confirm { display: block; margin-top: 8px; padding: 8px; color: #1d152b; background: #b49add; border-radius: 4px; font: 600 9px var(--sans); text-align: center; }
.cover-memory-strip { display: flex; justify-content: space-between; margin-top: 15px; gap: 5px; color: #8f849f; font: 7px/1.5 var(--sans); }
.cover-memory-strip span { padding: 4px 6px; border: 1px solid #ffffff12; border-radius: 20px; }
.cover-memory-note { position: absolute; left: -3%; top: 55%; width: 44%; padding: 14px; border: 1px solid #bba8dc2d; background: linear-gradient(145deg,#28222fee,#17151cee); backdrop-filter: blur(8px); box-shadow: 0 12px 35px #0006; transform: rotate(-4deg); }
.cover-memory-note > span { display: block; color: #afa4bf; font: 7px/1.5 var(--mono); letter-spacing: 1px; }
.cover-memory-note strong { display: block; color: #ded5e9; font: 500 12px/1.5 var(--sans); margin: 6px 0 10px; }
.cover-memory-note small { color: #9d93ad; font: 8px/1.5 var(--sans); }
.cover-memory-dots { display: flex; gap: 5px; margin-bottom: 9px; }
.cover-memory-dots i { display: block; width: 5px; height: 5px; background: #ba9ee2; border-radius: 50%; }
.project-display:is(:hover,:focus-within) .cover-timery-phone { transform: perspective(900px) rotateY(-5deg) rotateZ(-5deg) translateY(-7px); }

/* AI Job Agent: source material and a reviewable draft share the same desk. */
.cover--career { --cover-ink: #8bbdaf; --cover-rgb: 139,189,175; }
.cover--career .cover-title { font-size: clamp(42px,5.25vw,78px); }
.cover-agent-window { position: absolute; width: 93%; left: 1%; top: 19%; border: 1px solid #a7d2c539; border-radius: 10px; background: #111818; overflow: hidden; transform: perspective(1000px) rotateY(-13deg) rotateZ(7deg); box-shadow: 22px 27px 60px #000b; }
.cover-window-bar { display: flex; align-items: center; gap: 4px; padding: 12px 13px; border-bottom: 1px solid #ffffff10; background: #ffffff03; }
.cover-window-bar > i { width: 4px; height: 4px; border-radius: 50%; background: #687672; }
.cover-window-bar > span { margin-left: 8px; color: #a4b2ad; font: 7px/1 var(--mono); letter-spacing: 1px; }
.cover-agent-body { padding: 18px; }
.cover-agent-body > strong { display: block; color: #d8e5df; font: 600 18px/1.2 var(--sans); letter-spacing: -.5px; }
.cover-agent-command { margin: 12px 0 18px; display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border: 1px solid #c4e1d729; background: #bddfd306; border-radius: 5px; color: #afc5bb; font: 9px/1.4 var(--sans); }
.cover-agent-command b { color: #8bbdaf; font: 13px var(--mono); }
.cover-agent-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #ffffff0a; }
.cover-agent-row > i { width: 20px; height: 20px; display: grid; place-items: center; font: 7px var(--mono); font-style: normal; color: #9dbbb0; border: 1px solid #b1d9c829; border-radius: 50%; }
.cover-agent-row strong { display: block; color: #ccd9d2; font: 500 10px/1.5 var(--sans); }
.cover-agent-row small { color: #7f9389; font: 7px/1.5 var(--mono); }
.cover-agent-row > span:last-child { color: #a8c7b8; font: 8px var(--mono); }
.cover-source-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.cover-source-tags span { padding: 4px 5px; color: #a1b5a9; border: 1px solid #a7cdb51c; font: 7px/1.3 var(--mono); }
.cover-evidence-note { position: absolute; width: 57%; left: 34%; bottom: 9%; padding: 15px; border: 1px solid #add0c345; background: #17231fee; box-shadow: -10px 13px 38px #0008; transform: rotate(-5deg); }
.cover-evidence-note > span { color: #a0c6b6; font: 7px/1.5 var(--mono); letter-spacing: 1px; }
.cover-evidence-note > strong { display: block; margin: 8px 0; color: #d5e5dc; font: 500 11px/1.5 var(--sans); }
.cover-evidence-lines { display: grid; gap: 5px; }
.cover-evidence-lines i { height: 2px; background: #779c8a32; }
.cover-evidence-lines i:nth-child(2) { width: 86%; }
.cover-evidence-lines i:nth-child(3) { width: 65%; }
.cover-evidence-note > small { display: block; margin-top: 10px; color: #8aa999; font: 8px/1.5 var(--sans); }
.project-display:is(:hover,:focus-within) .cover-agent-window { transform: perspective(1000px) rotateY(-7deg) rotateZ(4deg) translateY(-7px); }

/* Camin: a small storefront, connected to the rest of the shopping journey. */
.cover--camin { --cover-ink: #c2a580; --cover-rgb: 194,165,128; }
.cover-camin-browser { position: absolute; left: 2%; top: 17%; width: 105%; border: 1px solid #bfa88d63; border-radius: 8px; background: #bdb6a7; overflow: hidden; transform: perspective(1000px) rotateY(-15deg) rotateZ(-6deg); box-shadow: 22px 24px 65px #000b; }
.cover-camin-browser .cover-window-bar { padding: 9px 12px; background: #201c19; border: 0; }
.cover-camin-browser .cover-window-bar > i { background: #6d6357; }
.cover-camin-browser .cover-window-bar > span { color: #aaa08f; }
.cover-shop-nav { display: flex; justify-content: space-between; align-items: center; padding: 13px 17px; color: #292723; border-bottom: 1px solid #28241e19; }
.cover-shop-nav strong { font: 600 13px/1 var(--sans); letter-spacing: -1px; }
.cover-shop-nav span { font: 6px/1 var(--mono); letter-spacing: 1px; }
.cover-shop-hero { position: relative; min-height: 196px; padding: 21px 17px; background: radial-gradient(ellipse at 80% 90%,#978b75,#bdb6a7 65%); }
.cover-shop-copy { position: relative; z-index: 1; width: 49%; }
.cover-shop-copy > span { display: block; color: #605a50; font: 6px/1.6 var(--mono); letter-spacing: 1px; }
.cover-shop-copy > strong { display: block; margin: 11px 0 17px; color: #252421; font: 500 26px/.98 Georgia,serif; letter-spacing: -1px; }
.cover-shop-copy > small { display: inline-block; color: #eeebe2; background: #33302b; padding: 7px 9px; font: 6px/1 var(--mono); }
.cover-shop-bag { position: absolute; right: 2%; top: 5%; width: 57%; height: 93%; filter: drop-shadow(8px 13px 7px #2b21174a); }
.cover-shop-footer { display: flex; justify-content: space-between; gap: 8px; padding: 13px 17px; background: #d0c9bb; color: #655d51; font: 6px/1.5 var(--mono); letter-spacing: 1px; }
.cover-order-note { position: absolute; left: -5%; bottom: 8%; width: 65%; padding: 15px 17px; border: 1px solid #ac927448; background: #211d18f0; transform: rotate(5deg); box-shadow: 12px 14px 35px #0008; }
.cover-order-note > span { color: #a59072; font: 7px var(--mono); letter-spacing: 1px; }
.cover-order-note > strong { display: block; color: #dfd1bd; font: 500 12px/1.5 var(--sans); margin: 8px 0 10px; }
.cover-order-steps { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #b8a78e; font: 8px/1.5 var(--sans); }
.cover-order-steps i { flex: 1; height: 1px; min-width: 5px; background: #c3aa7e3b; }
.project-display:is(:hover,:focus-within) .cover-camin-browser { transform: perspective(1000px) rotateY(-6deg) rotateZ(-3deg) translateY(-7px); }

/* HKUST(GZ): abstract robot motion, paired with the two real research efforts. */
.cover--research { --cover-ink: #8ab4cf; --cover-rgb: 138,180,207; }
.cover--research .cover-title { font-size: clamp(40px,4.8vw,72px); }
.cover--research .cover-line { font-size: clamp(15px,1.35vw,20px); }
.cover-research-stage { position: absolute; inset: 4% -8% 12% -5%; transform: perspective(1000px) rotateY(-7deg) rotateZ(-5deg); }
.cover-research-stage svg { width: 100%; height: 100%; overflow: visible; }
.cover-research-label { position: absolute; top: 9%; left: 9%; color: #7b9caf; font: 7px/1.8 var(--mono); letter-spacing: 1.3px; }
.cover-paper-notes { position: absolute; left: 8%; right: 2%; bottom: 10%; display: grid; grid-template-columns: 1.05fr 1fr; gap: 8px; transform: rotate(-4deg); }
.cover-paper-note { padding: 13px 11px; border: 1px solid #8caec33d; background: linear-gradient(145deg,#1c2830f2,#12191ff2); box-shadow: 5px 12px 20px #0006; }
.cover-paper-note > span { display: block; color: #7d9eb2; font: 6px/1.5 var(--mono); letter-spacing: .9px; }
.cover-paper-note > strong { display: block; color: #cedee9; margin: 7px 0; font: 600 13px/1.35 var(--sans); letter-spacing: -.2px; }
.cover-paper-note > small { display: block; color: #93a9b8; font: 8px/1.5 var(--sans); }
.project-display:is(:hover,:focus-within) .cover-research-stage { transform: perspective(1000px) rotateY(-2deg) rotateZ(-2deg) translateY(-5px); }

@media (min-width: 701px) and (max-width: 1100px) {
  .project-cover { min-height: 390px; }
  .cover-title { font-size: 61px; }
  .cover--career .cover-title { font-size: 55px; }
  .cover--research .cover-title { font-size: 48px; }
  .cover-line { font-size: 16px; }
  .cover-scene { left: 48%; }
  .cover-timery-phone { width: 63%; left: 20%; top: 15%; }
  .cover-memory-note { width: 51%; left: -3%; top: 58%; padding: 12px; }
  .cover-agent-window { width: 98%; left: 0; top: 18%; }
  .cover-agent-body { padding: 14px; }
  .cover-evidence-note { width: 64%; left: 27%; bottom: 8%; padding: 12px; }
  .cover-camin-browser { top: 20%; width: 116%; }
  .cover-shop-hero { min-height: 173px; }
  .cover-order-note { width: 77%; left: -6%; bottom: 11%; }
  .cover-paper-notes { left: 0; right: 1%; gap: 5px; }
  .cover-paper-note { padding: 12px 8px; }
  .cover-paper-note > strong { font-size: 11px; }
}
@media (max-width: 700px) {
  .project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) .display-label { padding: 14px 16px; font-size: 8px; flex-wrap: wrap; }
  .project-spotlight:is([data-project="timery"], [data-project="career"], [data-project="camin"], [data-project="research"]) .display-status { font-size: 9px; }
  .project-cover { min-height: 510px; aspect-ratio: .9; }
  .cover-copy { left: 7%; top: 8%; width: 86%; }
  .cover-eyebrow { font-size: 7px; letter-spacing: 1px; }
  .cover-title { font-size: clamp(45px,11.5vw,72px); margin: 12px 0; }
  .cover--career .cover-title { font-size: clamp(40px,10vw,65px); line-height: .94; }
  .cover--career .cover-title br { display: none; }
  .cover--career .cover-title br::after { content: ' '; }
  .cover--research .cover-title { font-size: clamp(38px,9.3vw,58px); line-height: .94; }
  .cover--research .cover-title br { display: none; }
  .cover-line, .cover--research .cover-line { font-size: 14px; line-height: 1.65; }
  .cover-scene { inset: 34% 4% 20% 20%; }
  .cover-scene::before { width: 95%; top: -4%; }
  .cover-cta { left: 7%; bottom: 6%; max-width: 86%; gap: 12px; }
  .cover-cta-icon { width: 44px; height: 44px; }
  .cover-caption { padding: 14px 16px; font-size: 7px; letter-spacing: .25px; gap: 8px; flex-wrap: wrap; }
  .cover-caption i { padding: 0 2px; }
  .cover-timery-phone { width: 145px; height: 255px; left: 36%; top: -5%; padding: 5px; border-radius: 20px; }
  .cover-timery-screen { padding: 10px 10px 0; border-radius: 14px; }
  .cover-timery-brand { font-size: 11px; }
  .cover-timery-brand::before { width: 12px; height: 15px; }
  .cover-timery-greeting { margin: 17px 0 5px; font-size: 18px; }
  .cover-timery-sub { font-size: 7px; }
  .cover-timery-prompt { margin-top: 12px; padding: 8px; font-size: 7px; }
  .cover-timery-response { padding: 8px; margin-top: 8px; }
  .cover-timery-response strong { font-size: 8px; margin: 5px 0 7px; }
  .cover-screen-tag { font-size: 6px; letter-spacing: 1px; }
  .cover-timery-slot { font-size: 7px; padding: 6px 0; }
  .cover-timery-confirm { font-size: 7px; padding: 7px; }
  .cover-memory-strip { margin-top: 10px; font-size: 6px; }
  .cover-memory-note { left: -8%; top: 39%; width: 56%; max-width: 155px; padding: 12px; }
  .cover-memory-note strong { font-size: 11px; }
  .cover--career { min-height: 550px; }
  .cover--career .cover-scene { inset: 40% 7% 20% 15%; }
  .cover-agent-window { width: 95%; top: 0; left: 5%; transform: perspective(1000px) rotateY(-8deg) rotateZ(6deg) scale(.78); transform-origin: 50% 0; }
  .project-display:is(:hover,:focus-within) .cover-agent-window { transform: perspective(1000px) rotateY(-5deg) rotateZ(3deg) translateY(-4px) scale(.78); }
  .cover-agent-body { padding: 13px; }
  .cover-agent-body > strong { font-size: 16px; }
  .cover-agent-command { margin: 10px 0 12px; font-size: 8px; padding: 8px; }
  .cover-agent-row { padding: 7px 0; gap: 7px; }
  .cover-agent-row strong { font-size: 9px; }
  .cover-agent-row small { font-size: 6px; }
  .cover-source-tags { margin-top: 9px; }
  .cover-evidence-note { left: -4%; bottom: -1%; width: 68%; padding: 12px; }
  .cover-evidence-note > strong { font-size: 10px; margin: 5px 0 8px; }
  .cover-evidence-note > small { font-size: 7px; margin-top: 8px; }
  .cover--camin .cover-scene { inset: 37% -2% 22% 13%; }
  .cover-camin-browser { width: 100%; left: 6%; top: -6%; }
  .cover-shop-nav { padding: 10px 13px; }
  .cover-shop-hero { min-height: 148px; padding: 15px 13px; }
  .cover-shop-copy > strong { font-size: 23px; margin: 9px 0 12px; }
  .cover-shop-footer { padding: 10px 13px; font-size: 5px; }
  .cover-order-note { left: -6%; bottom: -8%; width: 67%; padding: 12px; }
  .cover-order-note > strong { font-size: 11px; margin: 6px 0 8px; }
  .cover-order-steps { font-size: 7px; }
  .cover--research .cover-scene { inset: 38% 0 20% 8%; }
  .cover-research-stage { inset: -6% -6% 6% 0; }
  .cover-research-label { display: none; }
  .cover-paper-notes { left: 8%; right: 7%; bottom: -1%; gap: 7px; }
  .cover-paper-note { padding: 11px 9px; }
  .cover-paper-note > strong { font-size: 12px; }
  .cover-paper-note > small { font-size: 7px; }
}
@media (max-width: 380px) {
  .project-cover { min-height: 490px; }
  .cover--career { min-height: 550px; }
  .cover-eyebrow { font-size: 6px; }
  .cover--career .cover-title { font-size: 37px; }
  .cover--research .cover-title { font-size: 34px; }
  .cover-timery-phone { left: 29%; }
  .cover-agent-window { width: 98%; left: 2%; }
  .cover-evidence-note { left: -6%; width: 74%; }
  .cover--camin .cover-scene { left: 9%; }
  .cover-shop-copy > strong { font-size: 21px; }
  .cover-order-note { width: 73%; }
  .cover-paper-note > strong { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cover-object, .cover-cta-icon { transition: none; } }
.motion-off .cover-object, .motion-off .cover-cta-icon { transition: none; }