/* Japaar's portfolio: generous image stages, natural screenshot proportions. */
.portfolio-page { background:#14243a; color:#f4f0e8; }
.portfolio-page .site-header { color:var(--ink); background:rgba(234,231,223,.98); padding-left:1.25rem; }
.portfolio-page .mobile-menu { color:var(--ink); }
.portfolio-page .desktop-nav [aria-current=page]:after { right:0; }
.portfolio-page main { max-width:1440px; margin:auto; }
.portfolio-page a:focus-visible,.portfolio-page button:focus-visible { outline-color:#9ec3ff; }
.portfolio-intro { padding:142px var(--pad) 56px; }
.portfolio-overline { display:flex; justify-content:space-between; gap:24px; color:#b0bbc9; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.portfolio-title { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:60px; margin-top:56px; }
.portfolio-title h1 { font-size:clamp(72px,10.2vw,146px); font-weight:500; line-height:.9; letter-spacing:-.075em; }
.portfolio-title h1 em { font-style:normal; color:#96b8ff; }
.portfolio-title p { font-size:clamp(18px,2vw,26px); line-height:1.5; letter-spacing:-.025em; max-width:480px; }
.portfolio-index { display:flex; flex-wrap:wrap; gap:28px; margin-top:32px; }
.portfolio-index a { font-size:15px; padding:10px 0; border-bottom:1px solid #526073; }
.portfolio-index a:hover { border-color:#c8d9ff; color:#b9ceff; }
.portfolio-index span { margin-left:12px; color:#a0adbe; font-size:11px; vertical-align:top; }
.portfolio-film { padding:0 var(--pad) 80px; }
.film-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.film-heading h2 { font-size:17px; font-weight:400; letter-spacing:-.015em; }
.film-heading>span { color:#a0adbe; font-size:10px; letter-spacing:.12em; }
.portfolio-film video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b1626; border:1px solid #364456; border-radius:6px; }
.film-caption { color:#b0bbc9; font-size:13px; line-height:1.6; margin-top:16px; }
.film-caption a { color:#e1e9f6; text-decoration:underline; text-underline-offset:3px; }
.work-section { padding:72px var(--pad) 28px; border-top:1px solid #394658; }
.work-section-heading { display:grid; grid-template-columns:1fr 2fr; column-gap:24px; row-gap:16px; margin-bottom:46px; }
.work-section-heading>span { color:#a7b6c9; letter-spacing:.12em; font-size:11px; padding-top:10px; }
.work-section-heading h2 { font-size:clamp(35px,4vw,58px); line-height:1.05; letter-spacing:-.05em; font-weight:450; }
.work-section-heading p { grid-column:2; color:#b0bbc9; font-size:15px; line-height:1.5; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:54px 28px; }
.work-card { min-width:0; scroll-margin-top:115px; }
.work-stage { display:flex; justify-content:center; align-items:center; gap:clamp(12px,2.5vw,34px); padding:32px 24px; height:540px; border-radius:6px; background:#d2d9e0; overflow:hidden; }
.screen-link { display:flex; align-items:center; justify-content:center; width:45%; height:100%; max-width:210px; transition:transform .35s ease; }
.screen-link:nth-child(2) { transform:translateY(15px); }
.screen-link:first-child { transform:translateY(-15px); }
.screen-link:hover { transform:translateY(-4px); }
.screen-link img { width:auto; max-width:100%; max-height:100%; height:auto; border-radius:14px; box-shadow:0 12px 26px #15233826; }
.screen-link.gallery-extra { display:none; }
.work-huella .work-stage { background:#cad9ea; }
.work-nuna .work-stage { background:#dbd1df; }
.work-porte .work-stage { background:#d4d5cc; }
.work-taxiva .work-stage { background:#ced9d2; }
.work-juventud .work-stage { background:#e5d6c8; }
.work-alcala .work-stage { background:#d0dbe2; }
.work-umbria .work-stage { background:#273247; }
.work-encaja .work-stage { background:#ccdce2; }
.work-info { padding:23px 0 0; }
.work-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.work-number { color:#a0adbe; font-size:10px; margin-right:3px; }
.work-title h3 { font-size:25px; letter-spacing:-.045em; font-weight:500; line-height:1.2; }
.work-kind { margin-left:auto; font-size:11px; color:#b1becf; }
.work-info>p { max-width:470px; font-size:14px; line-height:1.65; color:#b8c3d2; margin-top:13px; }
.detail-link { display:inline-flex; align-items:center; gap:16px; font-size:12px; padding:12px 0 6px; border-bottom:1px solid #536177; margin-top:6px; }
.detail-link:hover { color:#b8cfff; border-color:#b8cfff; }
.detail-link span { font-size:18px; line-height:1; }
.institutional-note { margin:50px 0 32px; padding-top:24px; border-top:1px solid #394658; color:#b8c3d2; font-size:14px; line-height:1.6; }
.institutional-note strong { color:#f4f0e8; font-weight:500; }
.games-section { margin-top:35px; padding-bottom:70px; }
.games-section .work-stage { height:590px; }
.web-stage { padding:20px; background:#26364d; border-radius:6px; }
.web-stage a { display:block; overflow:hidden; border-radius:3px; }
.web-stage img { width:100%; aspect-ratio:16/10; height:auto; object-fit:contain; background:#e9e7e0; transition:transform .4s ease; }
.web-stage a:hover img { transform:scale(1.015); }
.web-grid { gap:50px 28px; }
.web-card .work-title h3 { font-size:24px; }
.work-actions { display:flex; flex-wrap:wrap; gap:24px; }
.portfolio-contact { border-top:1px solid #394658; margin-top:70px; padding:90px var(--pad) 100px; }
.portfolio-contact>span { color:#a7b6c9; letter-spacing:.12em; font-size:11px; }
.portfolio-contact h2 { font-size:clamp(44px,6vw,84px); line-height:1.1; letter-spacing:-.06em; font-weight:450; margin:20px 0 30px; }
.portfolio-page .button-primary { background:#afc7ff; color:#14243a; border:1px solid #afc7ff; }
.portfolio-page .button-primary:hover { background:#d0ddff; }
.portfolio-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:28px var(--pad); border-top:1px solid #394658; max-width:1440px; margin:auto; color:#b8c3d2; font-size:12px; }
.portfolio-footer a:hover { color:#fff; }
.portfolio-viewer { border:1px solid #3b4e65; padding:0; border-radius:10px; width:min(1200px,96vw); max-width:none; height:min(900px,94dvh); max-height:94dvh; background:#111e30; color:#f4f0e8; box-shadow:0 30px 100px #0008; }
.portfolio-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.portfolio-viewer::backdrop { background:#07101be8; backdrop-filter:blur(6px); }
.viewer-top,.viewer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 24px; }
.viewer-top { border-bottom:1px solid #304055; }
.viewer-top h2 { font-size:18px; font-weight:500; }
.portfolio-viewer button { background:transparent; color:inherit; border:1px solid #536177; border-radius:4px; min-height:44px; padding:8px 14px; cursor:pointer; font-size:13px; }
.portfolio-viewer button:hover { background:#304055; }
.portfolio-viewer button:disabled { opacity:.35; cursor:default; }
.viewer-body { min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:12px; }
.viewer-body img { height:100%; width:100%; object-fit:contain; max-height:100%; }
.viewer-bottom { border-top:1px solid #304055; font-size:12px; color:#c2cdda; }
body.gallery-open { overflow:hidden; }
.portfolio-home { background:#14243a; color:#f4f0e8; padding:70px var(--pad) 32px; display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:40px; }
.portfolio-home .section-index { color:#b2c3dc; }
.portfolio-home h2 { font-size:clamp(36px,4vw,56px); line-height:1.05; letter-spacing:-.055em; font-weight:450; margin:22px 0; }
.portfolio-home-copy>p { color:#bdc8d6; font-size:16px; max-width:400px; line-height:1.6; margin-bottom:28px; }
.portfolio-home .button-primary { background:#aec7ff; color:#14243a; border-color:#aec7ff; }
.portfolio-film-link { display:inline-block; font-size:13px; margin:18px 0 0 20px; border-bottom:1px solid #7c8ca5; padding-bottom:5px; }
.portfolio-home-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:center; padding:20px 0; }
.portfolio-home-gallery figure { margin:0; }
.portfolio-home-gallery figure:nth-child(even) { transform:translateY(24px); }
.portfolio-home-gallery img { width:100%; height:auto; border-radius:7px; box-shadow:0 18px 30px #0003; }
.portfolio-home-gallery figcaption { text-align:center; color:#b5c2d3; font-size:10px; margin-top:14px; }
.portfolio-home-credit { grid-column:1/-1; color:#a5b3c6; font-size:12px; line-height:1.6; padding-top:26px; border-top:1px solid #3b495c; }
@media(max-width:1000px) {
  .portfolio-title { gap:32px; }
  .work-stage { height:450px; padding:24px 16px; }
  .games-section .work-stage { height:500px; }
  .work-kind { flex-basis:100%; margin-left:25px; }
  .portfolio-home { grid-template-columns:1fr; }
  .portfolio-home-gallery { max-width:700px; width:100%; margin:0 auto 25px; gap:20px; }
}
@media(max-width:760px) {
  .portfolio-intro { padding-top:106px; padding-bottom:40px; }
  .portfolio-overline { font-size:9px; }
  .portfolio-overline span:last-child { display:none; }
  .portfolio-title { grid-template-columns:1fr; margin-top:32px; gap:28px; }
  .portfolio-title h1 { font-size:clamp(76px,17vw,118px); }
  .portfolio-title p { font-size:19px; }
  .portfolio-index { margin-top:20px; gap:30px; }
  .portfolio-film { padding-bottom:44px; }
  .film-heading h2 { font-size:15px; }
  .film-heading>span { display:none; }
  .film-caption { font-size:12px; }
  .work-section { padding-top:42px; }
  .work-section-heading { grid-template-columns:1fr; gap:15px; margin-bottom:28px; }
  .work-section-heading p { grid-column:auto; font-size:14px; }
  .work-section-heading h2 { font-size:40px; }
  .work-grid { grid-template-columns:1fr; gap:38px; }
  .work-stage,.games-section .work-stage { height:clamp(350px,96vw,540px); padding:24px; gap:24px; }
  .screen-link { width:46%; }
  .work-kind { flex-basis:auto; margin-left:auto; }
  .web-stage { padding:12px; }
  .work-info { padding-top:19px; }
  .work-info>p { font-size:14px; }
  .institutional-note { font-size:13px; margin:38px 0 14px; }
  .games-section { padding-bottom:45px; margin-top:18px; }
  .portfolio-contact { padding-top:55px; padding-bottom:60px; margin-top:45px; }
  .portfolio-footer { padding-block:25px; flex-direction:column; }
  .portfolio-viewer { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; border:0; }
  .viewer-top,.viewer-bottom { padding:12px 16px; }
  .viewer-body { padding:8px; }
  .portfolio-home { padding-top:45px; gap:20px; }
  .portfolio-home-gallery { gap:10px; }
  .portfolio-home h2 { font-size:39px; }
  .portfolio-film-link { margin-left:16px; }
}
@media(max-width:400px) {
  .work-kind { flex-basis:100%; margin-left:25px; }
  .work-stage,.games-section .work-stage { gap:15px; padding:20px 15px; }
  .portfolio-film-link { display:table; margin-left:0; }
}
@media(prefers-reduced-motion:reduce) {
  .screen-link,.web-stage img { transition:none; }
}

/* Each project owns its explanation, film and photo gallery. */
.portfolio-intro { padding-bottom:64px; }
.portfolio-title h1 { font-size:clamp(72px,9vw,128px); }
.portfolio-title p { max-width:490px; }
.work-grid { display:block; }
.project-block { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.45fr); gap:clamp(28px,5vw,70px); align-items:start; padding:52px 0 58px; border-top:1px solid #394658; }
.project-block:first-child { padding-top:0; border-top:0; }
.project-copy { padding-top:5px; }
.project-copy .work-title { gap:14px; }
.project-copy .work-number { font-size:12px; margin:0; }
.project-copy .work-title h3 { width:100%; order:2; font-size:clamp(36px,4vw,56px); font-weight:450; line-height:1.06; letter-spacing:-.05em; margin:10px 0 6px; }
.project-copy .work-kind { order:1; margin-left:0; font-size:12px; color:#c6d1df; }
.project-description { margin:18px 0 24px; color:#c0cad7; font-size:16px; line-height:1.75; max-width:470px; }
.project-description p+p { margin-top:14px; }
.project-features { margin:0 0 18px; padding:0; list-style:none; color:#e1e8f2; font-size:14px; line-height:1.5; }
.project-features li { padding:11px 0; border-top:1px solid #344258; }
.project-copy .detail-link { font-size:14px; margin-top:4px; }
.project-media { min-width:0; }
.project-player { border:1px solid #3b4b62; border-radius:8px; overflow:hidden; background:#111e30; aspect-ratio:16/9; }
.project-player video { display:block; width:100%; height:100%; object-fit:contain; }
.project-media-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; margin-top:6px; }
.project-media-bar>span { color:#a9b8cb; font-size:12px; letter-spacing:.05em; line-height:1.5; }
.project-media-bar button { font:inherit; font-size:14px; color:#d9e7ff; border:1px solid #526786; border-radius:30px; background:transparent; min-height:40px; padding:8px 18px; cursor:pointer; flex-shrink:0; }
.project-media-bar button:hover { background:#263b57; }
.project-photos { display:flex; align-items:stretch; gap:12px; margin-top:12px; overflow-x:auto; padding:5px 2px 10px; scrollbar-width:thin; scrollbar-color:#536581 transparent; }
.project-thumb { display:flex; align-items:center; justify-content:center; flex:0 0 84px; height:110px; padding:5px; background:#223249; border:1px solid #3b4b62; border-radius:5px; transition:background .2s; }
.project-thumb img { height:100%; width:100%; object-fit:contain; border-radius:2px; }
.project-thumb:hover { background:#354b6a; }
#webs .project-thumb { flex-basis:160px; height:100px; padding:4px; }
.project-photos a:focus-visible { outline-offset:0; }
.project-media:has(video[data-video-error]) .project-player { border-color:#adc5ef; }
.work-section-heading { margin-bottom:40px; }
.work-section-heading>span { font-size:12px; }
.work-section-heading p { font-size:16px; }
.portfolio-overline { font-size:12px; }
.portfolio-index span { font-size:12px; }
.portfolio-footer { font-size:14px; }
.games-section { margin-top:0; padding-bottom:15px; }
.institutional-note { margin-top:0; }
@media(max-width:1000px) {
  .project-block { grid-template-columns:minmax(220px,.78fr) minmax(0,1.15fr); gap:28px; }
  .project-copy .work-kind { flex-basis:auto; margin:0; }
}
@media(max-width:760px) {
  .portfolio-intro { padding-bottom:38px; }
  .project-block { grid-template-columns:1fr; gap:26px; padding:38px 0 42px; }
  .project-copy .work-title h3 { font-size:42px; }
  .project-description { font-size:16px; line-height:1.7; max-width:none; }
  .project-features { margin-bottom:10px; }
  .project-media-bar>span { font-size:12px; letter-spacing:0; }
  .project-media-bar button { padding:8px 13px; }
  .project-thumb { height:98px; flex-basis:78px; }
  #webs .project-thumb { flex-basis:135px; height:85px; }
  .portfolio-title h1 { font-size:clamp(72px,18vw,110px); }
  .portfolio-overline { font-size:12px; letter-spacing:.08em; }
  .work-section-heading>span { font-size:12px; }
}