.worlds{position:relative;background:var(--bone);color:var(--ink);padding-bottom:7rem}.worlds .section-head>p,.worlds .section-head>span{color:#67595c}.project-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));gap:1.25rem;padding:0 var(--gutter)}.project-card{position:relative;min-height:clamp(33rem,65vw,48rem);overflow:hidden;background:#291525;isolation:isolate}.project-card[data-theme="tdw"]{background:#80a74d}.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),filter .6s ease}.project-card[data-theme="safebound"] img{object-position:center 39%}.project-card[data-theme="tdw"] img{object-position:center top}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgb(12 7 12 / 90%));z-index:1}.project-open{position:absolute;inset:0;z-index:2;width:100%;border:0;background:none;color:#fff;text-align:left;padding:1.5rem;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}.project-top,.project-bottom{display:flex;justify-content:space-between;align-items:flex-start}.project-top{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em}.project-top span:last-child{border:1px solid rgb(255 255 255 / 50%);padding:.45rem .65rem;border-radius:999px}.project-bottom h3{margin:.6rem 0 0;font:400 clamp(3rem,6vw,6rem)/.85 var(--display);text-transform:uppercase;letter-spacing:-.06em}.project-bottom p{margin:0 0 .35rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em}.project-arrow{font-size:2.3rem;align-self:flex-end;transition:transform .35s var(--ease-out)}.project-card:hover img,.project-card:focus-within img{transform:scale(1.045);filter:saturate(1.12)}.project-card:hover .project-arrow,.project-card:focus-within .project-arrow{transform:translate(5px,-5px)}.next-world{margin:1.25rem var(--gutter) 0;padding:2rem 0;border-top:1px solid #bdb0a6;border-bottom:1px solid #bdb0a6;display:grid;grid-template-columns:5rem 1fr auto;align-items:center;text-transform:uppercase}.next-world span{font-size:.7rem}.next-world p{font:400 clamp(1.3rem,2.6vw,2.5rem) var(--display);letter-spacing:-.04em}.next-world i{font:400 3rem var(--body)}@media(max-width:700px){.project-list{grid-template-columns:1fr}.project-card{min-height:36rem}.next-world{grid-template-columns:3rem 1fr auto}}
@media(max-width:700px){.project-bottom h3{font-size:clamp(2.4rem,12vw,3.2rem)}.project-arrow{font-size:1.75rem}}

/* Layered project depth */
.project-card{--tilt-x:0deg;--tilt-y:0deg;--glow-x:50%;--glow-y:50%;perspective:1100px;transform-style:preserve-3d;transition:opacity .75s var(--ease-out),transform .85s var(--ease-out)}
.project-card:after{display:none}.project-art,.project-shade,.project-content{position:absolute;inset:0;transition:transform .55s var(--ease-out)}
.project-art{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035)}
.project-art img{width:100%;height:100%;object-fit:cover}
.project-shade{z-index:1;background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgb(255 255 255 / 9%),transparent 28%),linear-gradient(180deg,transparent 38%,rgb(12 7 12 / 92%));transform:translateZ(18px)}
.project-content{z-index:2;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(38px) translate(calc((var(--glow-x) - 50%) * .025),calc((var(--glow-y) - 50%) * .025))}
.project-open{padding:0}.project-open>.project-content{pointer-events:none}
.project-card:not(.is-revealed){opacity:0;transform:translateY(4rem) scale(.97)}
.project-card.is-revealed{opacity:1;transform:translateY(0) scale(1)}
.project-card:nth-child(2){transition-delay:.12s}
dialog[open]{transform-origin:var(--dialog-origin,50% 50%);animation:project-expand .65s var(--ease-out) both}
@keyframes project-expand{from{opacity:0;transform:scale(.25) rotate(-2deg);clip-path:inset(12% 18% round 1.5rem)}to{opacity:1;transform:scale(1);clip-path:inset(0 round 0)}}
.section-head,.studio-statement,.experience-line,.contact>h2{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.section-head:not(.is-revealed),.studio-statement:not(.is-revealed),.experience-line:not(.is-revealed),.contact>h2:not(.is-revealed){opacity:0;transform:translateY(3rem)}
@media(prefers-reduced-motion:reduce){.project-card,.project-art,.project-shade,.project-content,.section-head,.studio-statement,.experience-line,.contact>h2{transition:none!important;transform:none!important;opacity:1!important}dialog[open]{animation:none!important}}

/* Project dialog — the sheet takes the proportions of what it shows: a phone screen */
dialog{width:min(46rem,calc(100% - 2rem));height:min(94svh,56rem);max-height:calc(100svh - 2rem);padding:0;border:1px solid var(--line);background:var(--ink-raised);color:var(--bone);box-shadow:0 30px 90px rgb(0 0 0 / 65%);overflow:hidden}
dialog::backdrop{background:rgb(12 6 11 / 86%);backdrop-filter:blur(14px)}
dialog[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}

.dialog-rail{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"genre close" "title close";align-items:start;column-gap:1rem;padding:.95rem clamp(1rem,2.4vw,1.6rem) 1.05rem;border-bottom:1px solid var(--line)}
#dialog-genre{grid-area:genre;margin:0 0 .35rem;color:var(--ember);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem}
#project-dialog-title{grid-area:title;margin:0;font:400 clamp(1.9rem,5.5vw,3rem)/.88 var(--display);text-transform:uppercase;letter-spacing:-.05em;overflow-wrap:anywhere}
.dialog-meta{display:flex;flex-wrap:wrap;gap:.45rem}
.dialog-meta span{border:1px solid var(--line);padding:.45rem .7rem;text-transform:uppercase;font-size:.56rem;letter-spacing:.12em;white-space:nowrap}
.dialog-close{grid-area:close;align-self:start;position:static;border:1px solid rgb(244 234 219 / 32%);border-radius:99px;background:none;color:var(--bone);padding:.5rem .85rem;font:inherit;font-size:.68rem;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease}
.dialog-close:hover,.dialog-close:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.dialog-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;touch-action:pan-y;background:#0d070c;padding:clamp(.9rem,2.4vw,1.5rem) 0}
.dialog-visual>#dialog-image{position:relative;z-index:2;max-width:calc(100% - 2rem);max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid rgb(244 234 219 / 20%);box-shadow:0 24px 64px rgb(0 0 0 / 70%);transition:opacity .24s ease,transform .5s var(--ease-out)}

/* Prev/next are the neighbouring shots themselves, cut off by the sheet edge */
.gallery-controls{position:absolute;z-index:1;inset:0;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none}
.gallery-controls[hidden],.gallery-thumbnails[hidden]{display:none}
.gallery-controls button{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:clamp(3.75rem,25%,12rem);padding:0;border:0;background:none;overflow:hidden;cursor:pointer}
.peek{position:absolute;top:50%;height:72%;width:auto;max-width:none;opacity:.26;filter:saturate(.8);transition:opacity .3s ease,transform .4s var(--ease-out)}
.gallery-prev .peek{right:0;transform:translate(-8%,-50%)}
.gallery-next .peek{left:0;transform:translate(8%,-50%)}
.gallery-controls .glyph{position:relative;z-index:2;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid rgb(255 255 255 / 28%);background:rgb(13 7 12 / 72%);color:#fff;font-size:1rem;backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease,color .2s ease}
.gallery-controls button:hover .peek,.gallery-controls button:focus-visible .peek{opacity:.6}
.gallery-prev:hover .peek{transform:translate(-2%,-50%)}
.gallery-next:hover .peek{transform:translate(2%,-50%)}
.gallery-controls button:hover .glyph,.gallery-controls button:focus-visible .glyph{background:var(--ember);border-color:var(--ember);color:var(--ink)}

.dialog-reel{display:grid;gap:.9rem;padding:.85rem clamp(1rem,2.4vw,1.6rem) 1rem;border-top:1px solid var(--line)}
.reel-strip{position:relative;display:flex;align-items:center;gap:.9rem;min-width:0}
.reel-strip:after{content:"";position:absolute;z-index:1;right:0;top:0;bottom:0;width:2.5rem;background:linear-gradient(90deg,transparent,var(--ink-raised));pointer-events:none}
#gallery-counter{flex:0 0 auto;font-size:.6rem;letter-spacing:.14em;color:var(--bone-muted)}
.gallery-thumbnails{display:flex;gap:.5rem;min-width:0;overflow-x:auto;scrollbar-width:none;padding:.15rem 0}
.gallery-thumbnails::-webkit-scrollbar{display:none}
.gallery-thumbnails button{flex:0 0 auto;display:grid;justify-items:center;gap:.32rem;width:2.7rem;padding:0;border:0;background:none;color:var(--bone-muted);opacity:.55;cursor:pointer;transition:opacity .2s ease,color .2s ease}
.gallery-thumbnails img{width:100%;aspect-ratio:.62;object-fit:cover;border:1px solid var(--line);transition:border-color .2s ease}
.gallery-thumbnails span{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.gallery-thumbnails button:hover,.gallery-thumbnails button:focus-visible{opacity:1}
.gallery-thumbnails button[aria-current="true"]{opacity:1;color:var(--ember)}
.gallery-thumbnails button[aria-current="true"] img{border-color:var(--ember)}

.reel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;min-width:0}
#dialog-summary{margin:0;font-size:.86rem;line-height:1.5;color:var(--bone-muted)}
.store-pending{color:var(--bone-muted)}

@media(max-width:700px){
  dialog{height:auto;max-height:calc(100svh - 1rem);width:calc(100% - 1rem)}
  dialog[open]{grid-template-rows:auto auto auto}
  .dialog-visual{height:52svh;padding:.75rem 0}
  .gallery-controls button{width:22%}
  .gallery-controls .glyph{width:2.2rem;height:2.2rem;font-size:.9rem}
  .gallery-thumbnails button{width:2.4rem}
}

/* Unreleased gameplay privacy */
.project-card.is-spoiler .project-art img,
.dialog-visual>img.is-spoiler,
.gallery-thumbnails button.is-spoiler img{
  filter:blur(24px) brightness(.5) saturate(.72);
  transform:scale(1.08);
}
.peek.is-spoiler{filter:blur(18px) brightness(.5) saturate(.72)}
.gallery-thumbnails button{overflow:hidden}