/* Shared single-screen canvas for About and Playground. */
.hub-page .portfolio-hero { height: 100svh; min-height: 640px; grid-template-rows: auto minmax(280px,1fr) auto; row-gap: 24px; }
.hub-page .hub-footer { grid-area: 3 / 5 / 4 / 8; align-self: end; justify-self: center; padding: 0; border: 0; font: 400 .75rem/1.4375rem var(--font); color: var(--muted); }
.floating-stage { grid-area: 2 / 2 / 3 / 12; display: block; position: relative; align-self: stretch; aspect-ratio: auto; max-height: none; min-height: 0; pointer-events: auto; background: none; }
.floating-stage .hub-object { position: absolute; width: 52%; height: 94%; left: 24%; top: 0; object-fit: contain; transition: opacity 250ms; }
.orbit-item { position: absolute; z-index: 1; width: 220px; }
.orbit-profile { left: 9%; top: 18%; }
.orbit-experience { right: 5%; top: 41%; }
.orbit-approach { left: 23%; bottom: 17%; }
.orbit-button { display: flex; justify-content: space-between; align-items: center; gap: 26px; min-height: 54px; width: 100%; padding: 12px 16px; background: #191919; border: 1px solid #656563; transition: border-color 220ms ease, background-color 220ms ease; text-align: left; font: 400 1.25rem/1.4 var(--serif); }
.orbit-plus { font: 400 1.125rem/1 var(--font); color: #fff; }
.orbit-preview { margin: 10px 0 0; font: 400 .875rem/1.4 var(--font); color: #c2c2bc; opacity: 0; transform: translateY(3px); transition: opacity 180ms, transform 180ms; pointer-events: none; }
.orbit-item:hover .orbit-preview, .orbit-item:focus-within .orbit-preview { opacity: 1; transform: none; }
.orbit-button:hover, .orbit-button:focus-visible { background: #252525; border-color: #fff; }
.stage-hint { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--muted); font: 400 .75rem/1.4 var(--font); pointer-events: none; }

.gallery-float { position: absolute; width: 24%; max-width: 270px; }
.gallery-float.tile-game { left: 1%; top: 24%; --tilt: -5deg; }
.gallery-float.tile-poster { left: 30%; top: 3%; width: 19%; max-width: 195px; --tilt: 3deg; }
.gallery-float.tile-object { left: 57%; top: 24%; width: 20%; max-width: 220px; --tilt: -4deg; }
.gallery-float.tile-identity { right: -1%; bottom: 13%; width: 21%; max-width: 240px; --tilt: 5deg; }
.gallery-button { display: block; width: 100%; padding: 0; background: none; text-align: left; transform: rotate(var(--tilt)); transition: transform 240ms ease; }
.gallery-tile { display: flex; position: relative; width: 100%; aspect-ratio: 16 / 10; justify-content: center; align-items: center; overflow: hidden; background: #242424; border: 1px solid #464643; }
.tile-word { font: 400 clamp(1.5rem,3.4vw,3.25rem)/1 var(--serif); letter-spacing: -.05em; }
.tile-game .gallery-tile { background: #acc9ef; color: #17293e; border-color: #acc9ef; }
.tile-game .tile-word { font-family: var(--font); letter-spacing: -.065em; }
.tile-poster .gallery-tile { aspect-ratio: 2 / 3; background: #e4e5e2; color: #191919; border-color: #e4e5e2; }
.tile-poster .tile-word { font: 500 clamp(1.25rem,2.6vw,2.5rem)/1 var(--font); letter-spacing: -.06em; }
.tile-object .gallery-tile { aspect-ratio: 1; background: var(--paper); }
.floating-stage .gallery-tile img, .detail-preview img { width: 100%; height: 100%; object-fit: contain; mask-image: none; mix-blend-mode: lighten; }
.tile-status { position: absolute; bottom: 9px; left: 11px; font: 400 .75rem/1.3 var(--font); opacity: .68; }
.gallery-caption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; font: 400 .875rem/1.4 var(--font); }
.gallery-caption > span:last-child { font-size: 1.125rem; }
.gallery-preview { position: absolute; left: 0; right: -16px; margin: 12px 0 0; color: #c2c2bc; font: 400 .875rem/1.4 var(--font); opacity: 0; transition: opacity 180ms; pointer-events: none; }
.gallery-float:hover, .gallery-float:focus-within { z-index: 2; }
.gallery-float:hover .gallery-button, .gallery-float:focus-within .gallery-button { transform: translateY(-8px) rotate(0); }
.gallery-float:hover .gallery-preview, .gallery-float:focus-within .gallery-preview { opacity: 1; }

.explore-dialog { width: min(760px,calc(100% - 40px)); max-height: calc(100svh - 48px); padding: 24px 36px 40px; border: 1px solid #686866; background: #171717; overflow-y: auto; overscroll-behavior: contain; }
.explore-dialog::backdrop { background: rgb(0 0 0 / .58); backdrop-filter: blur(10px); }
.explore-close { display: flex; align-items: center; justify-content: flex-end; gap: 22px; min-height: 44px; padding: 0; margin: 0 0 32px auto; background: none; font: 400 .875rem/1.4 var(--font); }
.explore-close span { font-size: 1.5rem; }
.hub-detail[hidden] { display: none; }
.hub-detail h2 { font: 400 2rem/1.2 var(--serif); letter-spacing: -.035em; margin: 0 0 28px; }
.hub-detail p { max-width: 58ch; font: 400 1rem/1.6 var(--font); }
.hub-detail p + p { margin-top: 20px; }
.hub-detail .detail-intro { font: 400 1.5rem/1.35 var(--serif); margin-bottom: 24px; }
.detail-link { display: inline-block; margin-top: 28px; text-decoration: underline; text-underline-offset: 5px; }
.detail-practice { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 18px; font: 400 1.5rem/1.3 var(--serif); }
.detail-work-links a { display: grid; grid-template-columns: 1fr auto; gap: 7px 20px; padding: 18px 0; border-top: 1px solid #454543; }
.detail-work-links a > span:first-child { font: 400 1.5rem/1.3 var(--serif); }
.detail-work-links small { grid-area: 2 / 1 / 3 / 2; color: #b4b4ad; font: 400 .875rem/1.4 var(--font); }
.detail-work-links a > span:last-child { grid-area: 1 / 2; font-size: .875rem; }
.detail-work-links a:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.detail-preview { width: min(100%,520px); margin: 0 auto 24px; }
.gallery-detail.tile-poster .detail-preview { width: min(58%,230px); }
.gallery-detail.tile-object .detail-preview { width: min(65%,310px); }
.detail-preview .tile-word { font-size: clamp(2rem,5vw,4rem); }
.gallery-detail p { color: #b4b4ad; font-size: 12px; line-height: 18px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .floating-stage { grid-column: 1 / 13; }
  .orbit-item { width: 190px; }
  .orbit-profile { left: 7%; }
  .orbit-experience { right: 2%; }
  .gallery-float.tile-identity { right: 0; }
  .hub-page .hub-footer { grid-column: 5 / 7; font-size: .75rem; }
}
@media (max-width: 760px) {
  .hub-page .portfolio-hero { height: 100svh; min-height: 760px; grid-template-rows: auto auto minmax(260px,1fr) auto auto; row-gap: 20px; }
  .hub-page .hero-name { margin-bottom: 8px; }
  .hub-page .hero-contact { grid-area: 4 / 1 / 5 / 5; }
  .hub-page .hub-footer { grid-area: 5 / 1 / 6 / 5; justify-self: start; }
  .floating-stage { grid-area: 3 / 1 / 4 / 5; }
  .floating-stage .hub-object { width: 70%; left: 15%; height: 80%; top: 6%; }
  .orbit-item { width: 170px; }
  .orbit-button { min-height: 48px; padding: 10px 12px; gap: 12px; font-size: 1rem; }
  .orbit-profile { left: 0; top: 4%; }
  .orbit-experience { right: 0; top: 40%; }
  .orbit-approach { left: 3%; bottom: 16%; }
  .orbit-preview { font-size: .75rem; margin-top: 6px; }
  .gallery-float.tile-game { left: 1%; top: 7%; width: 44%; }
  .gallery-float.tile-poster { left: auto; right: 4%; top: 1%; width: 35%; max-width: 128px; }
  .gallery-float.tile-object { left: 7%; top: auto; bottom: 13%; width: 36%; max-width: 128px; }
  .gallery-float.tile-identity { right: 0; bottom: 7%; width: 45%; }
  .tile-word { font-size: 1.625rem; }
  .tile-poster .tile-word { font-size: 1.375rem; }
  .gallery-caption { font-size: .8125rem; padding-top: 6px; }
  .tile-status { font-size: .75rem; left: 8px; bottom: 7px; }
  .stage-hint { font-size: .75rem; bottom: -10px; }
  .gallery-preview { display: none; }
  .explore-dialog { padding: 16px 20px 28px; width: calc(100% - 24px); max-height: calc(100svh - 24px); }
  .explore-close { margin-bottom: 20px; }
  .hub-detail h2 { font-size: 1.75rem; }
}
@media (hover: none) { .pointer-hint { display: none; } .orbit-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { .gallery-button, .orbit-preview, .gallery-preview { transition: none; } }

/* About reveals a small inline note instead of opening a modal. */
.about-stage .orbit-item { width: 180px; }
.about-stage .orbit-button { min-height: 44px; font-size: 14px; gap: 12px; }
.about-stage .orbit-item.peek-open { z-index: 3; }
.about-peek { position: absolute; top: calc(100% + 8px); left: 0; width: 250px; max-width: calc(100vw - 40px); padding: 14px 16px; border: 1px solid #505050; background: #191919; color: #d8d8d2; font: 400 12px/18px var(--font); box-shadow: 0 8px 20px rgb(0 0 0 / .14); animation: peek-in 160ms ease-out; }
.about-peek[hidden] { display: none; }
.about-peek::before { content: ''; position: absolute; inset: -9px 0 auto; height: 9px; }
.orbit-experience .about-peek { left: auto; right: 0; }
.orbit-approach .about-peek { top: auto; bottom: calc(100% + 8px); }
.orbit-approach .about-peek::before { inset: auto 0 -9px; }
@keyframes peek-in { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) { .about-stage .orbit-item { width: 170px; } .about-peek { width: 230px; } }
@media (prefers-reduced-motion: reduce) { .about-peek { animation: none; } }

.about-stage .hub-object{width:38.5%;left:30.75%;height:70%;top:12%;mix-blend-mode:normal;mask-image:none}
@media(max-width:760px){.about-stage .hub-object{width:52%;left:24%;height:60%;top:16%}}

.about-peek p { text-wrap: balance; }
#approach-peek { width: 580px; left: -36px; }
#approach-peek .tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.about-modal-content .tool-column + .tool-column { margin-top: 20px; }
.tool-group + .tool-group { margin-top: 12px; }
.tool-group h3 { margin: 0 0 6px; font: inherit; color: #aaa; }
.tool-group ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tool-tag { position: relative; isolation: isolate; padding: 4px 8px; background: #606060; color: #e7e7e2; font-size: 11px; line-height: 16px; clip-path: polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px)); transition: color 180ms ease, background 180ms ease; }
.tool-tag::before { content: ''; position: absolute; z-index: -1; inset: 1px; background: #202020; clip-path: polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px)); transition: background 180ms ease; }
@media (hover: hover) { .tool-tag:hover { background: #efefeb; color: #171717; } .tool-tag:hover::before { background: #efefeb; } }

@media(max-width:760px){
 [data-page="about"] .portfolio-hero { height:auto; min-height:100svh; grid-template-rows:auto auto 340px auto; row-gap:24px; }
 [data-page="about"] .hero-information { gap:24px; }
 [data-page="about"] .about-stage { margin-top:0; }
}
.about-mobile-dialog { position:fixed; inset:0; margin:auto; width:calc(100% - 40px); max-width:400px; max-height:calc(100dvh - 48px); overflow:auto; padding:22px; border:1px solid #555; background:#191919; color:#e7e7e2; animation:about-modal-in 250ms ease both; }
.about-mobile-dialog::backdrop { background:rgb(0 0 0 / .65); backdrop-filter:blur(7px); animation:about-backdrop-in 250ms ease both; }
.about-mobile-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.about-mobile-dialog h2 { font:400 18px/1.4 var(--serif); margin:0; }
.about-mobile-dialog header button { width:44px; height:44px; margin:-10px; background:none; color:inherit; font-size:24px; }
.about-modal-content { font:400 14px/21px var(--font); }
.about-modal-content p { text-wrap:balance; }
.about-mobile-dialog.is-closing,.about-mobile-dialog.is-closing::backdrop { animation-direction:reverse; }
.about-mobile-dialog.is-closing { animation-name:about-modal-out; }
.about-mobile-dialog.is-closing::backdrop { animation-name:about-backdrop-out; }
@keyframes about-modal-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes about-modal-out { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes about-backdrop-in { from{opacity:0} to{opacity:1} }
@keyframes about-backdrop-out { from{opacity:0} to{opacity:1} }
@media(prefers-reduced-motion:reduce){.about-mobile-dialog,.about-mobile-dialog::backdrop{animation:none}}

@media(max-width:760px){
 [data-page="about"] .hero-specialities ul { display:grid; gap:4px; line-height:21px; }
 [data-page="about"] .hero-specialities li { display:block; }
 [data-page="about"] .about-stage { margin-top:16px; }
 .tool-tag { font-size:14px; line-height:21px; padding:5px 9px; }
 .tool-group h3 { font-size:14px; line-height:21px; }
 .tool-group ul { gap:8px; }
 .tool-group + .tool-group { margin-top:20px; }
 .tool-group h3 { margin-bottom:8px; }
}

@media(max-width:760px){.about-mobile-dialog header button{flex-shrink:0}}

@media(max-width:760px){
 [data-page="about"] .hero-information{gap:32px}
 .about-mobile-dialog header button{width:48px;height:48px;font-size:28px}
}

@media (min-width: 761px) { .about-stage .orbit-approach { left: calc(23% - 12px); bottom: calc(17% - 10px); } }