/* One page, many worlds. Content and artwork come from content.js. */
.project-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:stretch; }
.project { min-width:0; }
.project:last-child:nth-child(odd) { grid-column:1 / -1; }
.project-card { display:block; position:relative; isolation:isolate; overflow:hidden; width:100%; height:620px; padding:0; text-align:left; background:var(--surface-secondary); border:1px solid var(--border); color:var(--text-primary); }
.project-world { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; z-index:-3; transition:transform 1s var(--ease-out),filter .6s; }
.project-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,color-mix(in srgb,var(--background) 18%,transparent),transparent 30%,color-mix(in srgb,var(--background) 18%,transparent) 44%,color-mix(in srgb,var(--background) 93%,transparent) 78%,var(--background)); }
.project-topline { position:absolute; inset:26px 26px auto; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.project-status { display:flex; align-items:center; gap:8px; background:var(--surface-secondary); border:1px solid var(--border); padding:7px 10px; font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.045em; }
.project-status i { width:5px; height:5px; flex:0 0 5px; background:var(--brand); border-radius:50%; }
.project-number { font-size:9px; letter-spacing:.1em; font-weight:700; color:var(--text-primary); background:var(--surface-secondary); padding:6px 8px; }
.project-identity { position:absolute; inset:0; pointer-events:none; }
.project-logo { position:absolute; width:62%; left:6%; top:16%; transform:rotate(-5deg); filter:drop-shadow(0 6px 9px color-mix(in srgb,var(--shadow-color) 35%,transparent)); transition:transform .8s var(--ease-out); }
.project-foreground { position:absolute; width:38%; right:3%; top:23%; transform:rotate(8deg); filter:drop-shadow(0 12px 16px color-mix(in srgb,var(--shadow-color) 35%,transparent)); transition:transform .8s var(--ease-out); }
.project-wordmark { position:absolute; top:19%; left:8%; width:84%; display:flex; flex-direction:column; align-items:center; font-family:Georgia,serif; font-size:clamp(32px,3.4vw,55px); font-weight:700; line-height:1.06; letter-spacing:.07em; color:var(--game-coins-gold); text-shadow:0 2px 14px var(--shadow-color); transition:transform .8s var(--ease-out); }
.project-wordmark>span:last-child { font-size:1.12em; }
.project-copy { position:absolute; inset:auto 32px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.project-genre { color:var(--text-secondary); background:var(--surface-secondary); border:1px solid var(--border); padding:4px 7px; font-size:10px; font-weight:700; line-height:1.8; letter-spacing:.09em; }
.project-title { font-family:Barlow,sans-serif; font-size:clamp(44px,4.6vw,72px); line-height:1.05; margin-top:7px; letter-spacing:-.015em; }
.project-summary { font-size:14px; line-height:1.75; max-width:410px; color:var(--text-primary); margin-top:13px; }
.project-bottom { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:23px; margin-top:23px; border-top:1px solid var(--border); }
.project-cta { display:inline-flex; gap:21px; align-items:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1.5; }
.project-cta>span { font-size:23px; font-weight:400; transition:transform .3s var(--ease-out); }
.project-platform { color:var(--text-secondary); font-size:11px; }
.project-card:focus-visible { outline-offset:5px; }
@media(hover:hover) and (pointer:fine) {
  .project-card:hover .project-world { transform:scale(1.045); filter:brightness(1.05); }
  .project-card:hover .project-logo { transform:rotate(-2deg) translateY(-5px); }
  .project-card:hover .project-foreground { transform:rotate(3deg) translateY(-7px); }
  .project-card:hover .project-wordmark { transform:translateY(-5px); }
  .project-card:hover .project-cta { color:var(--brand); }
  .project-card:hover .project-cta>span { transform:translate(4px,-3px); }
}
.game-modal { width:min(1080px,calc(100vw - 48px)); max-height:92dvh; overscroll-behavior:contain; }
.game-dialog-bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:65px; padding:10px 18px 10px 27px; background:var(--surface-secondary); border-bottom:1px solid var(--border); }
.game-dialog-bar>.mono { font-size:10px; color:var(--text-secondary); }
.game-dialog-bar .modal-close { position:static; flex:0 0 44px; }
.game-modal-inner { grid-template-columns:.9fr 1.1fr; align-items:start; }
.game-gallery { position:sticky; top:65px; }
.carousel-stage { height:min(64dvh,650px); }
.carousel-toolbar { padding-top:11px; }
.carousel-caption>span:last-child { font-size:11px; line-height:1.5; }
.carousel-thumbnails { padding-block:10px 17px; }
.modal-game-copy { min-width:0; padding:34px 38px 36px; }
.modal-game-logo { width:165px; height:auto; margin-bottom:24px; }
.modal-game-copy h2 { font-size:clamp(48px,5vw,72px); margin:12px 0 23px; }
.modal-game-copy .modal-status { font-size:10px; color:var(--brand); }
.modal-game-copy .modal-description { font-size:14px; line-height:1.85; }
.modal-game-tags { gap:7px; margin:23px 0; }
.modal-game-tags span { font-size:10px; }
.modal-game-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:25px 0 19px; padding-block:19px; border-block:1px solid var(--border); }
.modal-game-facts dt { color:var(--text-secondary); font-size:10px; margin-bottom:5px; }
.modal-game-facts dd { font-size:12px; line-height:1.65; margin:0; }
.modal-game-copy .button { max-width:100%; font-size:12px; }
.modal-game-copy video { display:block; width:100%; margin-top:22px; }
.modal-art-note { font-size:11px; line-height:1.8; }
.return-gallery { margin-top:22px; font-size:12px; min-height:44px; }
.game-poster img { width:100%; height:100%; max-height:75dvh; object-fit:cover; }
/* Refinements keep the original founder story and compact, author-led identity. */
.studio-portrait { position:relative; }
.studio-portrait:before { content:''; position:absolute; left:-10px; top:15px; width:2px; height:60px; background:var(--brand); opacity:.6; }
.philosophy-row { transition:border-color .3s; }
.philosophy-row h3 { transition:transform .3s var(--ease-out); }
@media(hover:hover) { .philosophy-row:hover { border-color:var(--text-secondary); } .philosophy-row:hover h3 { transform:translateX(4px); } }
@media(min-width:1600px) { .project-card { height:690px; } }
@media(max-width:1100px) { .project-grid { grid-template-columns:1.2fr 1fr; gap:20px; } .project-card { height:595px; } .project-copy { inset:auto 25px 25px; } .project-topline { inset:21px 20px auto; } .project-title { font-size:52px; } .project-status { font-size:9px; } .project-number { display:none; } .project-logo { width:72%; top:19%; } .project-foreground { width:43%; top:31%; } .project-wordmark { font-size:39px; top:23%; } .modal-game-copy { padding-inline:27px; } }
@media(max-width:760px) {
  .project-grid { grid-template-columns:1fr; gap:25px; }
  .project-card { height:590px; }
  .project-coins .project-card { height:560px; }
  .project-topline { inset:20px 20px auto; }
  .project-number { display:block; }
  .project-copy { inset:auto 23px 23px; }
  .project-title { font-size:53px; }
  .project-logo { width:76%; top:17%; left:7%; }
  .project-foreground { width:48%; top:29%; right:5%; }
  .project-wordmark { top:20%; font-size:47px; }
  .project-summary { font-size:14px; max-width:430px; }
  .project-bottom { padding-top:17px; margin-top:20px; }
  .project-genre { font-size:9px; }
  .project-cta { font-size:10px; gap:18px; }
  .game-modal { width:calc(100vw - 20px); max-height:94dvh; }
  .game-dialog-bar { min-height:62px; padding:8px 12px 8px 20px; }
  .game-dialog-bar>.mono { font-size:9px; }
  .game-modal-inner { grid-template-columns:minmax(0,1fr); }
  .game-gallery { position:relative; top:auto; }
  .carousel-stage { height:min(49dvh,440px); }
  .carousel-toolbar { padding-inline:16px; }
  .carousel-caption>span:last-child { font-size:11px; }
  .modal-game-copy { padding:29px 24px 30px; }
  .modal-game-copy h2 { font-size:clamp(40px,13vw,56px); overflow-wrap:anywhere; }
  .modal-game-copy .button { display:flex; justify-content:space-between; width:100%; min-height:52px; font-size:12px; }
  .modal-game-copy .modal-description { font-size:14px; }
  .modal-game-logo { width:150px; }
  .modal-game-facts { gap:16px; }
}
@media(max-width:380px) { .project-card { height:550px; } .project-coins .project-card { height:540px; } .project-copy { inset-inline:20px; } .project-title { font-size:47px; } .project-wordmark { font-size:39px; } .project-status { font-size:8px; } .project-number { font-size:8px; } .project-logo { top:19%; } .project-foreground { top:31%; } .project-bottom { gap:10px; } .project-cta { font-size:9px; gap:10px; } .project-summary { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .project-card *, .philosophy-row, .philosophy-row h3 { transition:none!important; transform:none!important; } }