/* Portfolio covers and original illustrative studies. */
.project-scene.renant-scene { background:#242421; color:#f2e6d0; }
.renant-store-art { position:absolute; inset:0; }
.renant-product-photo { position:absolute; left:0; top:0; width:56%; height:100%; object-fit:contain; background:#f4f2f0; }
.renant-store-mark { position:absolute; left:64%; top:17%; width:27%; height:60%; object-fit:contain; }
.renant-chapter { position:absolute; left:63%; top:80%; font-size:clamp(7px,.8vw,10px); line-height:1.5; letter-spacing:.08em; }
.renant-scene .scene-top>span:first-child,.renant-scene .scene-caption { color:#423f38; }
.renant-scene .scene-caption { max-width:45%; }
.project-scene.kinary-scene { background:#e8f2fa; color:#063b66; }
.kinary-symbol { display:inline-flex; align-items:center; }
.kinary-symbol img { display:block; width:1em; height:1em; object-fit:contain; }
.mini-kinary img { display:inline-block; width:1.2em; height:1.2em; vertical-align:middle; object-fit:contain; }
.kinary-scene .care-window { background:#fbfdff; border-color:#dce9f3; color:#244b68; box-shadow:0 25px 40px #123d6026; }
.kinary-scene .care-orbit { border-color:#bfd3e4; }
.kinary-scene .window-top,.kinary-scene .mock-sidebar,.kinary-scene .mock-tiles>div { border-color:#dce7f0; }
.kinary-scene .mock-summary,.kinary-scene .window-top i,.kinary-scene .mock-sidebar b { background:#e3eff8; }
.kinary-scene .mock-summary small,.kinary-scene .mock-subtitle { color:#62798b; }
.site-page .project-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
.site-page .project-info .project-story { display:inline-flex; align-items:center; min-height:44px; margin-top:5px; font-size:12px; color:#b9b1c4; text-decoration:underline; text-underline-offset:5px; }
.site-page .project-info .project-story:hover { color:#f0e9fd; }
.project-scene.pixel-scene { background:#f8f5eb; color:#153e2d; }
.pixel-art { position:absolute; inset:16% 8% 17%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5cqw; }
.pixel-art img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.pixel-art p { margin:0; font:600 6.7cqw/1.06 var(--sans); letter-spacing:-.3cqw; }
.pixel-art p span { background:#d7f579; box-shadow:.8cqw 0 #d7f579,-.8cqw 0 #d7f579; }
.pixel-services { font-size:2cqw; line-height:1.5; letter-spacing:.025em; }
.pixel-scene .project-open { background:#153e2d; color:#f8f5eb; }
.site-page .project-info .project-visit { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:5px; font-size:13px; color:#c8b8f1; text-decoration:underline; text-underline-offset:5px; }
.site-page .project-info .project-visit:hover { color:#f0e9fd; }
.project-visit .icon { width:16px; height:16px; }
.project-scene.talk-scene { background: #efc8d1; color: #55263c; }
.project-scene.vault-scene { background: #f1be90; color: #59301d; }
.project-scene.gift-scene { background: #c7b9ed; color: #382857; }
.concept-art { position: absolute; width: 84%; max-width: 440px; aspect-ratio: 1; left: 50%; top: 48%; transform: translate(-50%, -50%); container-type: inline-size; }
.concept-wordmark { position: absolute; inset: 0 0 auto; font: 500 14cqw/.86 var(--sans); letter-spacing: -.8cqw; text-align: center; }
.concept-wordmark > span { display: block; }
.concept-note { position: absolute; inset: auto 0 0; font-size: 2.1cqw; text-align: center; letter-spacing: .13em; }
.talk-art .concept-wordmark { color: #57253d; }
.talk-art .concept-wordmark > span { font: italic 400 15.4cqw/1 var(--serif); letter-spacing: -.8cqw; }
.talk-bubble { position: absolute; border-radius: 5cqw; box-shadow: 0 6cqw 12cqw #6d294619; transition: transform .4s ease; }
.bubble-one { width: 84%; top: 39%; left: 0; padding: 6cqw; background: #fff5ef; color: #663447; font: 500 6.4cqw/1.2 var(--sans); border-bottom-left-radius: 0; transform: rotate(-6deg); }
.conversation-dots { display: flex; gap: 1.5cqw; margin-top: 5cqw; }
.conversation-dots i { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: #b7899a; }
.bubble-two { top: 66%; right: 0; width: 65%; padding: 6cqw; background: #953c61; color: #fff4f6; font: 500 7cqw/1.2 var(--sans); border-bottom-right-radius: 0; transform: rotate(5deg); }
.talk-flower { position: absolute; right: -1cqw; top: -10cqw; color: #fa725f; font: 20cqw/1 var(--sans); text-shadow: 0 1cqw #efc8d1; }
.talk-flower .icon, .vault-symbol .icon { display: block; width: 1em; height: 1em; }
.talk-scene:hover .bubble-one { transform: rotate(-2deg) translateY(-1cqw); }
.talk-scene:hover .bubble-two { transform: rotate(1deg) translateY(1cqw); }
.vault-art .concept-wordmark { color: #622d17; font-size: 14.5cqw; letter-spacing: -1cqw; }
.vault-art .concept-wordmark > span { margin-top: .6cqw; }
.vault-os { font: 400 3cqw/1 var(--mono); letter-spacing: 0; vertical-align: top; }
.vault-folder { position: absolute; left: 8%; width: 84%; height: 43%; border-radius: 2.5cqw; box-shadow: 0 5cqw 9cqw #5d2e1721; transition: transform .4s ease; }
.vault-folder:before { content: ''; position: absolute; left: 0; top: -5cqw; width: 43%; height: 8cqw; border-radius: 2.5cqw 5cqw 0 0; background: inherit; z-index: -1; }
.folder-back { top: 38%; background: #7b4023; transform: rotate(-10deg); }
.folder-front { top: 45%; background: #fa6e2c; color: #54260f; padding: 6cqw; transform: rotate(5deg); }
.folder-front > .mono { font-size: 2.4cqw; letter-spacing: .03em; }
.vault-symbol { font: 20cqw/1 var(--sans); margin-top: 3cqw; }
.folder-front .vault-record { position: absolute; bottom: 4cqw; left: 6cqw; font-size: 1.9cqw; }
.vault-scene:hover .folder-front { transform: rotate(1deg) translateY(-2cqw); }
.vault-scene:hover .folder-back { transform: rotate(-13deg); }
.gift-art .concept-wordmark { font: 400 9.5cqw/1 var(--serif); letter-spacing: -.5cqw; }
.gift-art .concept-wordmark > span { font-style: italic; color: #6a4b99; margin-top: 1cqw; }
.gift-orbit { position: absolute; top: 43%; left: 0; width: 100%; height: 43%; border: 1px solid #9279b6; border-radius: 50%; transform: rotate(-17deg); }
.memory-card { position: absolute; width: 31%; height: 35%; padding: 3cqw; border: 1px solid #fff8; border-radius: 2cqw; box-shadow: 0 4cqw 8cqw #513c6920; }
.memory-card > span { font: 2cqw var(--mono); }
.memory-card > i { display: block; font: italic 5.2cqw/1.1 var(--serif); margin-top: 6cqw; }
.memory-one { top: 31%; left: 6%; background: #f6e7be; transform: rotate(-14deg); }
.memory-two { top: 35%; right: 3%; background: #f2dded; transform: rotate(13deg); }
.gift-box { position: absolute; left: 33%; top: 57%; width: 39%; height: 29%; background: linear-gradient(110deg, #7756b3, #503880); border-radius: 1.3cqw; box-shadow: 4cqw 5cqw 9cqw #43246440; transform: rotate(-6deg); transition: transform .4s ease; }
.gift-lid { position: absolute; top: -3cqw; left: -2cqw; width: calc(100% + 4cqw); height: 8cqw; background: #8566bb; border-radius: 1cqw; border-bottom: 1cqw solid #46266f55; }
.gift-ribbon { position: absolute; top: -3cqw; bottom: 0; left: 41%; width: 18%; background: #d9f0b1; box-shadow: 1cqw 0 #2c14321f; }
.gift-bow { position: absolute; left: 17%; top: -20cqw; font: 25cqw/.8 var(--serif); color: #e3f5c6; transform: rotate(-10deg); }
.gift-scene:hover .gift-box { transform: rotate(1deg) translateY(-3cqw); }
body.project-talktogether { --project-accent: #edb8cb; --project-accent-dark: #442b36; }
body.project-orange-vault { --project-accent: #edb080; --project-accent-dark: #422b1e; }
body.project-3d-gift { --project-accent: #c7b6ef; --project-accent-dark: #342a48; }
.site-page .it-collection { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; border-top: 1px solid #39313f; margin-top: 75px; padding-top: 52px; }
.it-collection .mono { font-size: 9px; line-height: 1.7; color: #b3a2c6; }
.it-collection h2 { font: 400 clamp(36px, 4vw, 57px)/1.03 var(--serif); letter-spacing: -.04em; margin: 22px 0; }
.it-collection p { font-size: 15px; line-height: 1.85; color: #b9b1c4; max-width: 47ch; }
.collection-links { padding-top: 3px; }
.collection-links > .mono { display: block; margin-bottom: 18px; }
.collection-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #39313f; padding: 20px 0; font-size: 20px; min-height: 75px; }
.collection-links a small { display: block; font: 8px/1.6 var(--mono); color: #b3a2c6; margin-bottom: 6px; }
.collection-links a > span:last-child { color: #c6b6e2; font-size: 25px; transition: transform .2s; }
.collection-links a:hover { color: #d7c4f5; }
.collection-links a:hover > span:last-child { transform: translate(2px, -2px); }
@media (max-width: 760px) {
  .site-page .it-collection { grid-template-columns: 1fr; gap: 27px; margin-top: 48px; padding-top: 33px; }
  .it-collection h2 { font-size: 40px; }
  .it-collection p { font-size: 14px; }
  .project-page.project-orange-vault .project-heading h1 { font-size: clamp(42px, 11vw, 76px); }
}
.motion-paused .concept-art *, .motion-paused .collection-links a > span { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .concept-art *, .collection-links a > span { transition: none; }
}