/* Curios first card. Original approved raster is unchanged. */
:root { --curios-ink:#f5f1e8; --curios-surface:radial-gradient(ellipse at 50% 20%,#f3cf9a59,transparent 48%),radial-gradient(ellipse at 15% 47%,#c58c8547,transparent 60%),linear-gradient(158deg,#8a5657 0%,#b47e68 38%,#85565c 68%,#3b1e2c 100%); }
.project[data-project="curios"],.expanded-front[data-project="curios"] { --accent:#d7aa87; --art:var(--curios-surface); --shape:none; container:curios-card / inline-size; }
.project[data-project="curios"] { cursor:pointer; touch-action:manipulation; animation:none; transform:rotate(var(--tilt,0deg)); box-shadow:0 3px 0 #633c30,0 12px 18px -14px #000b,0 27px 43px -27px #000d; transition:transform .22s ease,box-shadow .22s ease; }
.project[data-project="curios"]::before { content:none; }
.project[data-project="curios"] .card-art,.expanded-front[data-project="curios"] { overflow:hidden; border-radius:.38rem; clip-path:inset(0 round .38rem); background:var(--art); border-color:#edd3b49e; box-shadow:inset 0 1px 0 #ffe8c7b3,inset 0 -2px 0 #3e1e1647,inset 0 0 0 1px #ffe0b82e; isolation:isolate; }
.project[data-project="curios"] .card-art::after,.expanded-front[data-project="curios"]::after { content:""; position:absolute; inset:1px; z-index:2; pointer-events:none; background:linear-gradient(145deg,#fff0d326,transparent 28%,transparent 100%); border-radius:inherit; }
.curios-scene { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.curios-portal-depth { position:absolute; left:33%; top:27%; width:35%; height:47%; border-radius:55% 55% 5px 5px; background:#34251d50; box-shadow:inset 0 5px 15px #201a184d,0 5px 12px 5px #3f271f38; filter:blur(3px); }
.curios-warm-rim { position:absolute; left:11%; top:3%; width:78%; height:75%; background:radial-gradient(ellipse at 50% 54%,#f7d69c24,transparent 65%); filter:blur(8px); }
.project[data-project="curios"] .district-city-emblem,.expanded-front[data-project="curios"] .district-city-emblem { position:absolute; z-index:1; display:block; left:-19%; top:0; width:138%; height:auto; max-width:none; transform:none; object-fit:contain; filter:drop-shadow(0 4px 4px #301c172e); pointer-events:none; }
.curios-title-veil { position:absolute; z-index:2; left:0; right:0; bottom:0; height:35cqw; background:linear-gradient(180deg,transparent,#3b1e2cf2 45%,#3b1e2c 100%); pointer-events:none; }
.project[data-project="curios"] .card-face-title,.expanded-front[data-project="curios"] .card-face-title { z-index:3; left:6.4%; right:6.4%; bottom:4.667cqw; padding:0; background:none; color:var(--curios-ink); text-align:left; }
.project[data-project="curios"] .card-face-title::before,.expanded-front[data-project="curios"] .card-face-title::before { content:none; }
.project[data-project="curios"] .card-face-title strong,.expanded-front[data-project="curios"] .card-face-title strong { display:block; padding:0; color:var(--curios-ink); font:500 clamp(1.5rem,12cqw,2.75rem)/1 Georgia,"Times New Roman",serif; letter-spacing:-.04em; overflow-wrap:anywhere; }
.project[data-project="curios"] .arcana-frame,.expanded-front[data-project="curios"] .arcana-frame { z-index:5; border-color:#f8e8c36b; }
.cards:not(.is-piled) .project[data-project="curios"]:focus-visible { outline:2px solid #f5f1e8; outline-offset:6px; transform:translateY(-3px) rotate(0); box-shadow:0 4px 0 #633c30,0 24px 40px -23px #000e; }
@media(hover:hover) { .cards:not(.is-piled) .project[data-project="curios"]:hover { transform:perspective(900px) translateY(-6px) rotateX(1.3deg) rotateY(-1.5deg); box-shadow:0 5px 0 #633c30,0 26px 43px -23px #000e; } }
.cards:not(.is-piled) .project[data-project="curios"]:active { transform:translateY(-1px) scale(.995); box-shadow:0 1px 0 #633c30,0 9px 20px -16px #000c; }
.cards.has-six-projects .project[data-order="0"] { grid-column:2 / span 3; --tilt:-2.5deg; animation-delay:-1s; }
.cards.has-six-projects .project[data-order="1"] { grid-column:5 / span 3; --tilt:1.5deg; animation-delay:-3s; }
.cards.has-six-projects .project[data-order="2"] { grid-column:8 / span 3; --tilt:-1deg; animation-delay:-2s; }
.cards.has-six-projects .project[data-order="3"] { grid-column:2 / span 3; --tilt:2deg; animation-delay:-4s; }
.cards.has-six-projects .project[data-order="4"] { grid-column:5 / span 3; --tilt:-1.5deg; animation-delay:-2.5s; }
.cards.has-six-projects .project[data-order="5"] { grid-column:8 / span 3; --tilt:1.8deg; animation-delay:-3.5s; }
.cards.has-six-projects .project:focus-visible,.card-modal :is(button,a,[tabindex]):focus-visible { outline:2px solid #f5f1e8; outline-offset:5px; }
.card-modal .modal-close,.card-modal .card-nav,.expanded-actions>a,.expanded-actions>button { min-width:44px; min-height:44px; touch-action:manipulation; }
.card-nav[hidden] { display:none; }
@container curios-card (max-width:220px) { .district-city-emblem { left:-19%!important; width:138%!important; } .card-face-title strong { font-size:clamp(1.2rem,12cqw,1.6rem)!important; } }
@media(max-width:900px) { .cards.has-six-projects .project[data-order="0"],.cards.has-six-projects .project[data-order="3"] { grid-column:1 / span 4; } .cards.has-six-projects .project[data-order="1"],.cards.has-six-projects .project[data-order="4"] { grid-column:5 / span 4; } .cards.has-six-projects .project[data-order="2"],.cards.has-six-projects .project[data-order="5"] { grid-column:9 / span 4; } }
@media(max-width:620px) { .cards.has-six-projects .project[data-order="0"] { grid-column:1 / span 2; margin-top:0; } .cards.has-six-projects .project[data-order="1"] { grid-column:3 / span 2; margin-top:2rem; } .cards.has-six-projects .project[data-order="2"],.cards.has-six-projects .project[data-order="4"] { grid-column:1 / span 2; margin-top:-.4rem; } .cards.has-six-projects .project[data-order="3"],.cards.has-six-projects .project[data-order="5"] { grid-column:3 / span 2; margin-top:1.3rem; } .cards.has-six-projects.is-unpiling .project { transition-delay:calc((5 - var(--pile-order,0)) * 75ms); } }
@media(prefers-reduced-motion:reduce) { .cards:not(.is-piled) .project[data-project="curios"],.cards:not(.is-piled) .project[data-project="curios"]:hover,.cards:not(.is-piled) .project[data-project="curios"]:focus-visible,.cards:not(.is-piled) .project[data-project="curios"]:active { transform:none; transition:none; } }
@media(prefers-reduced-transparency:reduce) { .card-modal { backdrop-filter:none; -webkit-backdrop-filter:none; background:#080d0f; } .project[data-project="curios"] .card-art::after,.expanded-front[data-project="curios"]::after { display:none; } }
@media(prefers-contrast:more) { .project[data-project="curios"] .card-art,.expanded-front[data-project="curios"] { border-color:#0d1417; } .project[data-project="curios"] .arcana-frame,.expanded-front[data-project="curios"] .arcana-frame { border-color:#0d1417; opacity:1; } .card-modal { background:#080d0f; backdrop-filter:none; } .card-modal .meta,.card-modal .story { color:#f5f1e8; } }